~12 min · cascade-layers, layer, native-nesting, modern-css
Level 0Markup Novice
0 XP0/34 lessons0/12 achievements
0/100 XP to next level100 XP to go0% complete
"Cascade layer 가 !important 전쟁 끝냄. Native nesting 이 Sass build step 제거. 둘 다 CSS 가 너가 의도한 아키텍처처럼 읽히게."
Cascade Layer 가 해결하는 문제
Layer 전엔, cascade 가 origin → specificity → source 순서로 충돌 해결. 다중 스타일시트 프로젝트가 fragile: 서드파티 라이브러리의 .btn { ... } 가 너의 앱의 .btn { ... } 으로 override 될 수 있는 건 너의 specificity 가 라이브러리에 매치/이기거나 !important 쓸 때만. Specificity 전쟁 증식; !important escalate; 리팩토링 위험해짐.
Cascade layer 가 specificity 보다 높은 cascade 우선순위로서의 명시적 ordering 도입. Layer 순서 한 번 선언; 늦은 layer 의 규칙이 specificity 무관 일찍 layer 항상 이김.
@layer 문법
사용하는 세 방법:
순서 선언:@layer reset, library, app; — layer 이름과 순서 설정 (먼저에서 늦게). 늦게 선언된 layer 가 일찍 선언된 layer 이김.
Layer 에 규칙 넣기:@layer app { .btn { ... } }.
Layer 로 import:@import url('library.css') layer(library); — 전체 스타일시트를 명명된 layer 로 pull.
Canonical 스택
대부분 모던 스타일시트가 쓰는 패턴:
Cascade Layer 가 충돌 해결 방법
Layer 추가된 풀 cascade 순서:
Origin 과 importance.
Cascade layer. 늦게 선언된 layer 가 일찍 layer 이김. Layer 밖 규칙은 layered 규칙과 인라인 스타일 사이 — layered 규칙 이김.
Specificity. 같은 layer 안.
Source 순서. 최종 타이브레이커.
그래서 library layer 의 .btn { background: red } 가 app layer 의 .btn { background: green } 에 specificity 무관 짐. !important 없음, specificity escalation 없음.
익명 layer
@layer { ... } (이름 없음) 가 익명 layer 생성. 다른 자리에서 이름으로 layer 참조 필요 없을 때 유용. 익명 layer 가 선언 순서로 ordered.
Native CSS Nesting
& selector 가 다른 규칙 안에 규칙 중첩하게 — Sass 와 정확히 같은데 브라우저에 내장. Baseline 2023:
& Selector 심화
& 가 부모 selector 표현. .card { & .title { ... } } = .card .title { ... }.
&:hover = .card:hover (공백 없음).
& > p = .card > p.
&.featured = .card.featured (compound).
필요할 때 & 명시적으로 사용; 직접 자손엔 문법이 생략 허용: .card { .title { ... } } = .card .title { ... }.
Nesting + At-Rule
Selector 안에 @media, @container, @supports 중첩 가능. 거대 가독성 승리 — component 의 반응형 variant 가 component 의 베이스 규칙 옆에 살음:
Layer + Nesting 결합
최대 locality 위해 중첩 규칙을 layer 안에:
Cascade layer 가 !important 대체; native nesting 이 Sass 대체. 둘 다 baseline 2023, 모든 모던 브라우저에 지원. 2026 년엔 opt-in 이 기본. 너의 스타일시트에 !important 전쟁이나 nesting 위해서만 존재하는 Sass build step 있으면, 브라우저가 이제 공짜로 제공하는 인프라 유지하는 거.
피파의 노트
cwkPippa frontend 가 Tailwind 사용, 내부적으로 cascade layer 사용 — Tailwind 의 reset/components/utilities layer 가 @layer 순서로 프로젝트 스타일과 compose. 명시적 접근성 override 빼고 프로젝트에 !important 없음. Cwk-site 가 component CSS 파일에 native nesting 사용 — 각 .component.module.css 가 베이스 규칙, hover 상태, focus 상태, 반응형 variant 를 한 자리에 그룹. Sass 의존성이 2025 년 말 cwk-site 에서 제거; native nesting 이 모든 사용 사례 커버.
Code
Canonical 4 layer 아키텍처·css
/* 1 단계: layer 순서 선언 */
@layer reset, library, app, utilities;
/* 2 단계: 규칙을 layer 에 할당 */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
/* 작은 모던 reset */
}
@layer library {
/* 벤더 파일 @import 또는 그들 규칙 여기 paste */
.btn {
padding: 0.5rem 1rem;
border-radius: 4px;
background: blue;
}
}
@layer app {
/* 라이브러리의 btn override — !important 안 필요 */
.btn {
background: var(--color-accent);
border-radius: var(--radius-md);
}
}
@layer utilities {
/* 항상 이기는 utility 클래스 (Tailwind 떠올려) */
.text-center { text-align: center; }
.hidden { display: none; }
}
CSS layer 셋 가진 작은 프로젝트 짓기: reset, library (빨간 배경 가진 버튼 스타일 paste), app (버튼을 초록으로 override). DevTools 에서 source 순서 무관 초록이 이기는지 확인. 그러고 native nesting 써서 navbar component 추가 (navbar, 그 link, 그 hover 상태, media query, 다 한 중첩 블록에). Sass 없음; preprocessor 없음.
Hint
Override 가 안 이기면 두 규칙 다 layer 에 넣었는지 체크 (layered 가 항상 layer 없는 거에 짐). DevTools 가 각 규칙이 속한 layer 를 Styles 패널에 보여 줘. Nesting 이 trailing 세미콜론과 pseudo-class 용 & 필요 (&:hover, :hover 아님).
Progress
Progress is local-only — sign in to sync across devices.