Cascade 전체: Origin, Layer, Specificity, Source 순서

"Cascade 는 무법 지대가 아니야. 브라우저가 두 규칙이 같은 property 원할 때마다 걷는 네 단계 알고리즘."

Cascade 는 알고리즘이야

두 선언이 같은 element 와 property 를 타깃할 때, 브라우저가 이 리스트 걷고 첫 결정적 비교에서 멈추면서 승자 고름:

1. Origin 과 importance — 누가 규칙 쓴 거 (UA, user, author) 와 !important 마크 됐는지.
2. Cascade layer — 규칙이 어느 명명된 layer 에 속하는지.
3. Specificity — 이전 레슨의 (a,b,c,d) 점수.
4. Source 순서 — 어느 규칙이 늦게 선언됐는지.

이 레슨은 1 단계와 4 단계 — specificity 를 감싸는 framing. 2 단계 (cascade layer) 는 Track 7 에서 자기 레슨 받음. 대부분의 고통을 해결하는 모던 도구라서.

세 Origin

• User-Agent (UA) 스타일시트 — 브라우저의 내장 기본값. h1 이 bold 고 2em. a 가 파랑 + 밑줄. button 이 padding 과 border 가짐. 모든 사이트가 이 baseline 에서 시작.
• User 스타일시트 — 사용자가 브라우저 설정, userstyles.world 스크립트, 또는 브라우저 익스텐션으로 설치. 개인 접근성 override 용 (큰 글꼴, 더 높은 contrast).
• Author 스타일시트 — 너의 CSS. 사이트의 CSS.

Tier 별 Cascade 순서

풀 origin-and-importance 순서, 가장 약한 것에서 가장 강한 것:

1. UA-default normal
2. User normal
3. Author normal
4. Author !important
5. User !important
6. UA !important

!important 에서의 역전 주목: normal tier 에선 author 가 user 가 UA 이김; !important tier 에선 순서 뒤집혀 user-important 가 author-important 이김. 의도된 거 — 접근성 필요 가진 사용자가 !important author 규칙조차 override 할 수 있게.

Cascade 의 애니메이션과 트랜지션

CSS 애니메이션과 트랜지션은 자기 슬롯 가져:

• 애니메이션 선언 (@keyframes 안의 규칙) 이 author-normal 규칙 override 하지만 author-!important 한테 짐.
• 트랜지션 선언 (CSS 트랜지션 중 in-flight 값) 이 !important 포함 모든 author 규칙 이김, 트랜지션 돌아가는 동안만.

가끔 다른 자리에 !important 설정했는데도 property 가 가시적으로 애니메이트되는 거 보이는 이유 — 트랜지션의 interpolated 값이 애니메이션 윈도우 동안 이기는 거.

Source 순서: 최종 타이브레이커

나머지 다 동점일 때 — 같은 origin, 같은 layer, 같은 specificity — source 에서 늦게 선언된 규칙이 이김. 포함:

• 같은 <style> 태그의 규칙, top-to-bottom 평가.
• 여러 스타일시트 걸친 규칙, document load 순서로 평가 (늦은 <link> 이김).
• @import 의 규칙 — import 된 파일의 일부로 셈, @import 문 위치에서.

Tailwind 가 작동하는 이유: 모든 utility 클래스가 (0,0,1,0), 그래서 HTML 의 class 이름 순서가 안 중요 — 중요한 건 Tailwind 가 CSS 파일에 내보내는 순서, 그리고 Tailwind 가 결정적 순서 강제.

실제 코드의 Cascade Origin: Reset

CSS reset (또는 Eric Meyer 의 reset, normalize.css, 프로젝트별 작은 reset 같은 모던 등가물) 은 사이트가 일관된 baseline 에서 시작하게 UA 기본값을 0 으로 만드는 author-origin CSS. 모던 reset 은 작아 — box-sizing 정규화, 기본 margin 제거, 몇 가지 일관성 없는 기본값 표준화. 브라우저와의 싸움이 아니라 그냥 명시적 baseline.

DevTools 에서 Cascade 검사

Chrome DevTools → Elements → Styles 탭이 선택된 element 에 매치하는 모든 규칙을 cascade 순서로, override 된 선언은 줄긋기로 보여 줘. 각자 hover 하면 origin 알려 줘 ("user agent stylesheet" vs 너의 파일). 이렇게 "왜 브라우저 기본이 여전히 보이지?" 를 초 단위로 디버깅.

피파의 노트