CSS Cascading - style 적용의 우선순위

 

CSS 적용 우선순위의 기본 개념

CSS는 여러 스타일의 규칙이 동일한 요소에 적용될 때 Cascading (폭포수 효과) 원리를 통해 어떤 스타일이 적용될지 결정합니다. 이를 통해 예측 가능한 동작과 효율적인 스타일 관리가 가능합니다.

 

가장 간단한 예시를 몇 가지 보겠습니다.

하나의 요소 `<p>텍스트 내용</p>`에 두 가지 스타일을 적용하려고 합니다. 그리고 결과는 늦게 선언된 `color: red`가 적용되죠.

See the Pen css-cascading-01 by Hansaem Jeong (@Hansaem-Jeong) on CodePen.

 

또 다른 경우도 있습니다. `p` 태그를 `div`로 감싸고 `id`와 `class` 속성을 추가합니다. 그리고 세 가지의 스타일을 적용하려고 합니다. 결과는 가장 먼저 선언된 `color: red`가 적용됩니다.

See the Pen Untitled by Hansaem Jeong (@Hansaem-Jeong) on CodePen.

 

위와 같이 여러 스타일이 충돌할 때는 최종 스타일을 결정해야 합니다. 이를 위한 규칙이 Cascading입니다.

 

---

Cascading이란?

Cascading의 정의와 동작 원리

Cascading은 여러 소스의 CSS 규칙이 충돌할 때 우선순위, 명시도, 선언 순서를 기준으로 최종 스타일을 결정하는 메커니즘입니다.

우선순위 규칙

CSS는 다음 순서로 스타일을 평가합니다.

• 1. 중요도(Important) : `!important`가 지정된 스타일이 최우선
• 2. 명시도(Specificity) : 선택자의 구체성이 높을수록 우선 적용
  • 인라인 스타일(`style` 속성) = 1000점
  • ID 선택자(`#id`) = 100점
  • 클래스, 가상 클래스, 속성 선택자(`.class`, `:hover`, `[type="text"]`) = 10점
  • 요소 선택자 및 가상 요소(`div`, `h1`, `::before`) = 1점
  • 전체 선택자(`*`) = 0점
• 3. 선언 순서(Source Order) : 동일한 명시도라면, 나중에 선언된 스타일이 적용

 

---

Cascading의 주요 특징

선언 순서의  중요성

동일한 선택자에서 나중에 선언된 스타일이 우선합니다.

h1 {
  color: blue;
}

h1 {
  color: red;
}

상속과 기본값

CSS는 일부 속성(`color`, `font-family`)을 부모 요소에서 자식 요소로 자동 상속합니다. 그러나 `margin`, `padding` 등은 기본적으로 상속되지 않습니다. 아래의 결과로 파란색을 적용합니다.

See the Pen css-cascading-03 by Hansaem Jeong (@Hansaem-Jeong) on CodePen.

!important의 역할

`!important`는 가장 높은 우선순위를 가집니다. 그러나 과도한 사용은 스타일 관리와 디버깅을 어렵게 만듭니다. 아래의 결과로 파란색이 적용됩니다.

See the Pen css-cascading-04 by Hansaem Jeong (@Hansaem-Jeong) on CodePen.

 

---

Cascading을 알아야 하는 이유

실무에서의 중요성

Cascading은 대규모 프로젝트에서 스타일 충돌을 해결하거나 재사용 가능한 CSS를 작성하는 데 필수적입니다.

- 공통 스타일 정의 : 상위 요소에 공통 스타일을 적용하고, 하위 요소에서 덮어 씌우는 구조 설계

- 명확한 우선순위 체계 : 협업 시 명시도를 이해하면 불필요한 `!important` 사용을 줄일 수 있습니다.

효율적인 스타일링을 위한 팁

1. Reset 또는 Normalize CSS 활용 : 브라우저 기본 스타일 차이를 없애기 위해서.

2. 명시도 관리 : ID 선택자보다는 클래스 선택자를 사용하는 것이 유지보수에 유리함.

3. Cascading 활용 : 상속 가능한 속성은 부모 요소에서 선언해 코드 중복을 줄임.