01 — Cascade & Specificity
한 줄 답: 한 요소의 최종 스타일은 하나의 규칙이 이기는 것이 아니라, origin → importance → layer → specificity → order의 8단 토너먼트의 결과다. 모던 CSS는 이 토너먼트를
@layer·@scope·:where로 코드에서 직접 모델링한다.
이 챕터가 답하는 질문
<button class="btn">에 적용된color: red가 왜 이긴 건가?- 두 규칙의 specificity가 같으면 어느 게 이기는가?
:where(.btn, .button)은 왜 specificity가 0인가?!important는 정말 만능인가? — 사용자 스타일시트와 만나면 어떻게 되는가?- Tailwind v4는 왜
@layer로 통째로 감싸는가? :has(> .invalid)로 부모를 잡을 수 있다 — 캐스케이드는 어떻게 영향받는가?font-size는 상속되는데border는 왜 안 되는가?
이 7가지에 답할 수 있다면, *“왜 내 CSS가 안 먹히지?”*는 디버깅 문제가 아니라 알고리즘 단계 추적 문제가 된다.
챕터 구조
| 문서 | 다루는 것 | 핵심 키워드 |
|---|---|---|
01-cascade-algorithm | 8단 토너먼트 전체 | origin, importance, layer, scope, specificity, order |
02-specificity | (a,b,c) 계산법, 모던 선택자 | inline, id, class, type, :where, :is, :not |
03-inheritance | 상속·computed/used/actual value | initial, inherit, unset, revert, revert-layer |
04-cascade-layers | @layer 완전 정복 | named/anonymous, nested, reset, Tailwind v4 |
05-scope | @scope·:has()·:is/:where | scope root, proximity, donut scope |
06-important-and-origins | !important와 origin의 역사 | UA·user·author·animation·transition |
5-레이어 모델 안에서의 위치
캐스케이드는 모든 스타일링의 토대다. Layout이 정확해도 캐스케이드가 잘못되면 어떤 값이 적용될지 자체가 흔들린다. 그래서 0번 챕터(box model·units) 다음 1번 챕터로 놓였다.
Why — 왜 이 챕터가 통째로 필요한가
CSS 문제의 약 70%는 **“내가 쓴 규칙이 안 먹힌다”**이다. 이걸 푸는 방법은 한 가지다 — 왜 안 먹히는지를 단계별로 추적하는 것. 그러려면 다음을 알아야 한다.
| 모르면 생기는 사고 | 해당 문서 |
|---|---|
.btn { color: red }이 라이브러리의 button { color: blue }에 진다 | 01-cascade-algorithm |
동료가 짠 #header .nav a:hover를 못 덮어쓴다 | 02-specificity |
다크모드 추가하니 body의 color가 자식에 전파 안 됨 | 03-inheritance |
Tailwind와 자체 CSS가 충돌해서 !important로 도배 | 04-cascade-layers |
카드 컴포넌트 안에서만 h1을 다르게 하고 싶다 | 05-scope |
라이브러리가 !important로 작성해서 못 덮음 | 06-important-and-origins |
How — 어떻게 읽나
순서대로 읽기를 권장한다. 캐스케이드 알고리즘(01)이 모든 후속 문서의 전제이기 때문이다.
- 빠르게 훑고 싶다면:
01-cascade-algorithm→04-cascade-layers→06-important-and-origins만 봐도 80% 이해. - 디자인 시스템 만들 거라면:
02-specificity(:where이해) +04-cascade-layers(레이어 설계) +05-scope(컴포넌트 격리)가 필수. - 레거시 코드 디버깅:
01+06(!important역사) +03(revert로 풀기).
What — 다루는 표준과 범위
- CSS Cascade Level 5 (W3C CR, 2022) —
@layer도입 - CSS Cascade Level 6 (W3C ED) —
@scope도입 - Selectors Level 4 —
:is(),:where(),:has() - CSS Values 4 —
revert,revert-layer - 사실상 표준 — Tailwind v4(
@layer), Open Props(원자 토큰), BEM(캐스케이드 회피)
브라우저 지원은 2024-2026 Baseline 기준. @layer는 Chrome 99+/Safari 15.4+/Firefox 97+ (Baseline 2022). @scope는 Chrome 118+/Safari 17.4+/Firefox는 2024년부터 진행 중.
What-if — 이 챕터를 건너뛰면
!important30개짜리 CSS 파일을 만들게 된다.- 디자인 시스템이 라이브러리에 진다.
- “왜 안 먹히지?”가 매주 발생한다.
- 다크모드 추가 시 변수 전파가 끊겨서 색상이 절반만 바뀐다.
Insight — 캐스케이드의 철학
CSS는 1996년 Håkon Wium Lie의 제안서에서 시작됐는데, 원안의 핵심은 “누구나 자기 스타일을 더할 수 있다” 였다. 사용자(독자)도, 작성자(웹페이지)도, 브라우저도 스타일을 선언할 수 있고, cascade는 이들을 평화롭게 합치는 알고리즘이었다.
이 정신은 !important의 비대칭성에 남아 있다 — 사용자의 !important는 작성자의 !important를 이긴다. 접근성을 위해서다. 우리가 잊기 쉽지만, 캐스케이드는 *“개발자가 이긴다”*가 아니라 *“사용자가 이긴다”*가 원래 디자인이었다.
2022년 @layer의 도입은 이 정신의 복원이다 — 작성자 내부의 우선순위를 코드로 명시함으로써, !important로 origin을 침범하는 일을 없앤다.
요약
- 캐스케이드는 8단 토너먼트다. 한 규칙이 이기는 게 아니라 어떤 규칙이 어디까지 살아남나의 문제.
- Specificity는 그 8단 중 6번째 단계일 뿐이다. 그 위에 origin·layer·scope가 있다.
- 모던 CSS는 캐스케이드를 암묵적에서 코드로 명시하는 방향으로 진화했다.
다음: 01-cascade-algorithm에서 8단 토너먼트를 한 단계씩 본다.