노트

CSS 캐스케이드

CSS Cascade

프런트엔드#css · 연결된 개념 6개

쉽게 말하면

CSS 캐스케이드는 같은 자리에 값이 여럿일 때 승부를 가리는 순서예요. 축구 순위에서 승점이 같으면 골 득실을 보듯, 출처, 인라인 스타일, 레이어, 명시도, 선언 순서를 차례로 따져요.

비유가 깨지는 곳 흔히 명시도만 떠올리지만 그건 네 번째 기준이에요. 그리고 class 속성에서 뒤에 쓴 클래스가 이기는 게 아니라 스타일시트에서 나중에 선언된 규칙이 이겨서, Tailwind에선 tailwind-merge가 필요해요.

같은 요소의 같은 속성에 여러 규칙이 값을 줄 때, 브라우저가 어느 값을 쓸지 정하는 규칙. 흔히 명시도(Specificity)만 떠올리지만 그보다 앞서 비교하는 기준들이 있다.

위에서부터 차례로 비교하고, 한 단계에서 승부가 나면 아래 단계는 보지 않는다.

  1. 출처와 중요도(Origin and Importance): 브라우저 기본 스타일 < 사용자 스타일 < 작성자 스타일. !important가 붙으면 이 순서가 뒤집힌다. 애니메이션·트랜지션 값도 이 단계에서 따로 다룬다
  2. 인라인 스타일(Inline Style): style 속성은 레이어·명시도와 상관없이 선택자 규칙보다 먼저 이긴다
  3. 캐스케이드 레이어: @layer로 묶은 순서. 명시도보다 먼저 평가된다
  4. 명시도: #id > .class·속성·가상 클래스 > 태그
  5. 선언 순서(Order of Appearance): 모두 같으면 나중에 나온 규칙이 이긴다

자주 하는 오해:

  • "클래스 문자열에서 뒤에 쓴 클래스가 이긴다"는 틀렸다. class="a b"와 class="b a"는 같다. 이기는 쪽은 스타일시트에서 나중에 선언된 규칙이고, Tailwind에서 tailwind-merge와 cn()가 필요한 이유가 이것이다
  • 명시도 싸움(!important 덧칠, #id 추가)으로 덮어쓰기보다, 레이어로 순서를 정하는 편이 깔끔하다
  • 상속(Inheritance)되는 값(color, font 등)은 캐스케이드에서 이긴 값이 없을 때만 부모에게서 온다

출처: MDN — Introducing the CSS Cascade: Cascading order

연결된 개념

이 노트를 가리키는 문서

뜻이 가까운 노트

  • Tailwind CSS

    flex, px-4, text-sm처럼 속성 하나를 담은 유틸리티 클래스(Utility Class)를 마크업에 조합해 스타일을 입히는 CSS 프레임워크. 빌드할 때 소스를 훑어 실제로 쓰인 클래스의 CSS만 만들어 내는 빌드 도구이고, 런타임에 돌아가는 JS(JavaScript)는 없다.

  • CSS 리셋

    브라우저마다 다른 기본 스타일(제목 여백, 목록 들여쓰기 등)을 지우거나 맞춰서, 같은 출발점에서 스타일링하게 하는 기법.

  • 크로스 브라우징

    크로스 브라우징은 브라우저 종류·버전·기기가 달라도 웹 페이지가 같은 기능을 제공하도록 만드는 일이다. 모든 브라우저에서 픽셀까지 똑같이 보이게 하는 것이 목표가 아니라, 지원하기로 한 환경에서 핵심 기능이 동작하고 오래된 환경에서도 쓸 수는 있게(점진적 향상, Progressive Enhancement) 하는 것이 목표다.

  • 속성 선택자와 형제 선택자

    대괄호 []로 HTML 속성을 기준으로 요소를 고르는 선택자와, +·~로 형제 관계를 따라 고르는 선택자. CSS뿐 아니라 querySelectorAll에서도 똑같이 쓴다.

  • Sass와 PostCSS

    둘 다 CSS를 변환하는 빌드 도구지만 출발점이 다르다. Sass(Syntactically Awesome Style Sheets)는 자기 언어(SCSS, Sassy CSS)를 CSS로 번역하는 전처리기(Preprocessor)이고, PostCSS는 표준 CSS를 받아 플러그인 체인으로 변환하는 도구다.

보기 옵션