CSS @scope · @layer · nesting — 2026년 새 캐스케이드 전략

핵심 요약

2026년 5월 기준 모든 메이저 브라우저가 @scope·@layer·native nesting을 지원. CSS-in-JS 없이도 모듈화·우선순위 통제가 가능해졌다. Tailwind v4와도 자연스럽게 어울린다.

1. @layer — 우선순위 그룹화

@layer reset, base, theme, components, utilities;

@layer base {
  body { font: 16px/1.5 sans-serif }
}
@layer components {
  .btn { padding: .5rem 1rem }
}
@layer utilities {
  .text-red { color: red }
}

핵심: layer 안의 specificity는 layer 간 우선순위를 못 이긴다. !important 안 써도 utilities가 components를 덮어쓴다.

2. @scope — 진짜 모듈 CSS

@scope (.card) to (.card-content) {
  :scope { border: 1px solid #ddd }
  h2 { font-size: 1.25rem }   /* card 안의 h2만 */
}

to 절로 하위 트리 경계 지정. .card-content 안쪽은 영향 안 받음. CSS-in-JS의 캡슐화를 표준 CSS로.

3. Native nesting

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5 }
  & .title { font-weight: 600 }
  @media (min-width: 768px) {
    padding: 1.5rem;
  }
}

Sass와 거의 동일 문법. & 명시 권장 (모호함 회피).

4. Tailwind v4와의 공존

Tailwind v4가 내부적으로 layer 구조를 그대로 사용. 사용자 layer 추가 가능:

@import "tailwindcss";

@layer base {
  /* tailwind의 base 다음에 적용 */
  body { letter-spacing: -.01em }
}

@layer components {
  .btn-primary { @apply bg-blue-600 text-white px-4 py-2 rounded }
}

BEM·SMACSS와도 호환. 기존 코드를 layer로 감싸기만 해도 우선순위 제어 가능.

5. 결정 트리

6. specificity 디버깅

DevTools (Chrome 122+, Firefox 124+) → Styles 패널에서 layer 이름과 specificity가 같이 표시. "왜 안 먹지"가 거의 사라진다.

7. Container Queries와 결합

@layer components {
  .card {
    container-type: inline-size;
    @container (min-width: 400px) {
      display: flex;
    }
  }
}

8. 마이그레이션 패턴

1. 전체 CSS를 @layer legacy로 감싼다 (한 줄 수정)
2. 신규 작성은 @layer components 또는 utilities
3. 중복·미사용은 점진 제거. legacy는 깔끔해질 때까지 유지

9. 흔한 함정

• @layer 선언 순서가 우선순위: @layer a, b;면 b가 더 강함
• unlayered CSS는 모든 layer보다 강함: 의도치 않게 덮어쓰면 그 줄을 layer에 편입
• @scope에서 자식 선택: :scope > div 형태
• 스타일링된 컴포넌트(styled-components)와 충돌: 라이브러리가 head 끝에 inject → unlayered가 됨. 제공 옵션 확인

10. 실측 — CSS-in-JS 제거 후

참고

• developer.mozilla.org/CSS/@layer
• developer.mozilla.org/CSS/@scope