CSS Cascade 구조 이해하기

---

1. 왜 Cascading이 필요한가?

CSS를 작성하다 보면 하나의 HTML 요소에 여러 스타일 규칙이 동시에 적용되는 상황이 발생한다.
이 때 서로 충돌한 스타일 중 어떤 규칙을 최종적으로 적용할지 결정하는 기준이 필요하다.

Cascading은 이러한 스타일 충돌을 해결하기 위한 우선순위 결정 구조이다.

---

2. Cascading의 우선순위 구조

Cascading은 다음 순서에 따라 적용된다.

Importance

가장 강력한 우선순위를 가진다.
속성 값 뒤에 !important를 붙이면 다른 모든 기준을 무시하고 해당 스타일이 우선 적용된다.

color: red !important;

!important는 Cascading의 자연스러운 흐름을 무시하는 방식이므로, 꼭 필요한 상황에서만 사용하는 것이 바람직하다.

Specificity

중요도가 동일할 경우, 선택자가 명시도(Specificity) 에 따라 우선순위가 결정된다.

선택자가 요소를 얼마나 구체적으로 지칭하는지가 기준이 된다.

ID > Class > Tag

Source Order

중요도와 명시도가 모두 같다면,
CSS는 위에서 아래로 읽힌다는 원칙에 따라
나중에 선언된 스타일이 적용된다.

---

3. Specificity 계산 방법

명시도는 일반적으로 (ID, Class, Tag) 형태의 3자리 숫자로 표현한다.
왼쪽 자리에 숫자가 클수록 무조건 우선순위가 높다.

선택자 종류	점수 (ID, Class, Tag)	예시
아이디 (ID)	(1, 0, 0)	#id, #header
클래스 (Class)	(0, 1, 0)	.class, .btn, :hover, [type="text"]
태그 (Tag)	(0, 0, 1)	p , div, ::before
전체/조합자	(0, 0, 0)	*, +, >, ~ (점수 없음)

예시

#id (1,0,0) vs .class .btn (0,2,0)

두 번째 자리의 수는 .class .btn이 더 높지만,
첫 번째 자리에서 #id가 더 크기 때문에 #id가 우선한다.

예외 사항

• 인라인 스타일(style="") 은 (1, 0, 0, 0)으로 취급되며,
  !important를 제외한 모든 선택자보다 우선한다.
• 조합자(>, +, ~)와 전체 선택자(*)는 점수에 영향을 주지 않는다.

---

4. 단계별 적용 예시

CASE 1 - !important가 적용된 경우

<p id="id" class="class p" style="color: navy;">
  CSS Cascade TEST
</p>

p { color: red; }
.class { color: orange; }
.class { color: yellow; }
.class .p{ color: green; }
#id { color: blue; }
p { color: purple !important; }

p는 (0,0,1)의 점수를 갖지만,
!important가 적용되어 Importance 단계에서 우선 결정된다.

따라서 최종 결과는 color: purple;

CASE 2 - 인라인 스타일이 적용된 경우

<p id="id" class="class p" style="color: navy;">
  CSS Cascade TEST
</p>

p { color: red; }
.class { color: orange; }
.class { color: yellow; }
.class .p{ color: green; }
#id { color: blue; }
/* p { color: purple !important; } */  

인라인 스타일은 (1, 0, 0, 0)으로 취급되며,
일반 선택자보다 높은 우선순위를 가진다.

Specificity 단계에서 이미 우선 결정됨

최종 결과는 color: navy;

CASE 3 - ID 선택자가 적용된 경우

<p id="id" class="class p">
  CSS Cascade TEST
</p>

p { color: red; }
.class { color: orange; }
.class { color: yellow; }
.class .p{ color: green; }
#id { color: blue; }

#id는 (1, 0, 0)의 점수를 가진다.

다른 선택자들보다 ID 값이 더 크므로
Specificity 단계에서 우선 결정된다.

최종 결과는 color: blue;

CASE 4 - 더 구체적인 클래스 조합이 있는 경우

<p id="id" class="class p">
  CSS Cascade TEST
</p>

p { color: red; }
.class { color: orange; }
.class { color: yellow; }
.class .p{ color: green; }

.class → (0, 1. 0)
.class .p → (0, 2, 0)

Class 개수가 더 많은 .class .p가
Specificity 단계에서 우선 적용된다.

최종 결과는 color: green;

CASE 5 - 동일한 선택자가 여러 번 선언된 경우

<p id="id" class="class p">
  CSS Cascade TEST
</p>

p { color: red; }
.class { color: orange; }
.class { color: yellow; }

두 .class 선택자는 모두 (0, 1, 0)으로 동일하다.

Specificity가 같으므로
Source Order 단계가 적용된다.

나중에 선언된 color: yellow;가 최종 적용된다.

CASE 6 - 클래스 하나만 존재하는 경우

<p id="id" class="class p">
  CSS Cascade TEST
</p>

p { color: red; }
.class { color: orange; }

.class (0, 1, 0)은
p (0, 0, 1)보다 점수가 높다.

Specificity 단계에서 .class가 우선

최종 결과는 color: orange;

<p id="id" class="class p"> <!-- style="color: navy;" -->
  CSS Cascade TEST
</p>

CASE 7 - 태그 선택자만 존재하는 경우

<p id="id" class="class p">
  CSS Cascade TEST
</p>

p { color: red; }

다른 선택자가 존재하지 않으므로
p (0, 0, 1)이 적용된다.

최종 결과는 color: red;

참고 - (0, 0, 0) 선택자의 경우

전체 선택자 *나 조합자(>, +, ~)는
Specificity 점수에 영향을 주지 않는다.

* { color: gray; }
p { color: red; }

*는 (0, 0, 0)
p는 (0, 0, 1)

따라서 p가 우선 적용된다.

즉(0, 0, 0) 선택자는
다른 선택자가 존재할 경우 거의 항상 밀리게 된다.

---

5. Cascading을 이해하면 달라지는 점

Cascading을 이해하면 스타일 충돌이 발생했을 때
무작정 !important를 사용하는 대신,

• 현재 어떤 단계(Importance / Specificity / Source Order)에서 충돌이 발생했는지 판단할 수 있다.
• 선택자의 구조를 조정하여 의도한 스타일을 예측 가능하게 설계할 수 있다.
• 불필요한 중복 코드나 과도하게 복잡한 선택자 사용을 줄일 수 있다.

즉, CSS를 감으로 작성하는 것이 아니라 구조적으로 설계할 수 있게 된다.

---

6. 핵심 정리

• Cascading은 스타일 충돌을 해결하기 위한 우선순위 체계이다.
• 우선순위는 Importance → Specificity → Source Order 순으로 적용된다.
• Specificity는 (ID, Class, Tag) 점수 체계로 계산된다.
• 인라인 스타일은 일반 선택자보다 우선한다.
• !important는 모든 기준보다 우선하지만, 남용은 지양해야 한다.

---