기본 개념

캐스케이드 레이어

유틸리티로 공통 컴포넌트를 재정의하고 규칙 간 충돌, 레이어 밖의 CSS, 중요도의 영향을 진단합니다.

이 페이지의 내용

선택자의 명시도를 높이지 않고도 특정 요소의 스타일을 조정할 수 있습니다. 공통 컴포넌트 규칙은 components 레이어에 두고, 각 인스턴스의 유틸리티로 필요한 속성만 재정의하세요.

#특정 인스턴스의 컴포넌트 스타일 재정의하기

CSS 캐스케이드 레이어는 선택자의 명시도를 비교하기 전에 선언 그룹의 우선순위를 정합니다. 재사용할 컴포넌트 스타일은 components 레이어에 두고, 특정 인스턴스에 다른 값이 필요할 때 유틸리티를 적용하세요.

공통 컴포넌트의 개별 조정

@layer components {  .collection-card {    padding: 1.5rem;    border: 1px solid var(--color-line-divider);    border-radius: var(--radius-lg);    background-color: var(--color-surface-raised);  }}

<div class="grid-cols(1) gap-lg wrap-anywhere">  <article class="collection-card">    <h2 class="m(0) text-lg font-regular">Release notes</h2>    <p class="mt-xs mb(0) text-sm fg-text-muted">Updates for your workspace.</p>  </article>  <article class="collection-card p-sm">    <h2 class="m(0) text-lg font-regular">Release notes</h2>    <p class="mt-xs mb(0) text-sm fg-text-muted">Updates for your workspace.</p>  </article></div>

생성된 CSS

@layer components {  .collection-card {    border: 1px solid var(--color-line-divider);    border-radius: var(--radius-lg);    background-color: var(--color-surface-raised);    padding: 1.5rem;  }}@layer theme {  :root,  :host {    --color-zinc-40: oklch(68.6% .0028 265);    --color-zinc-60: oklch(48.6% .003 265);    --color-zinc-90: oklch(24.6% .0022 265)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-muted: light-dark(var(--color-zinc-60), var(--color-zinc-40))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-weight-regular: 400;    --font-size-sm: .875rem;    --font-size-lg: 1.125rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --text-lg: var(--font-size-lg);    --text-lg--line-height: 1.5;    --text-lg--letter-spacing: 0;    --radius-lg: .5rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem;    --spacing-lg: 1.5rem  }}@layer utilities {  .text-lg {    font-size: var(--text-lg);    line-height: var(--text-lg--line-height, normal);    letter-spacing: var(--text-lg--letter-spacing, normal)  }  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .grid-cols\(1\) {    display: grid;    grid-template-columns: repeat(1, minmax(0, 1fr))  }  .fg-text-muted {    color: var(--color-text-muted)  }  .font-regular {    font-weight: var(--font-weight-regular)  }  .gap-lg {    gap: var(--spacing-lg)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mt-xs {    margin-top: var(--spacing-xs)  }  .mb\(0\) {    margin-bottom: calc(0 * 1px)  }  .wrap-anywhere {    overflow-wrap: anywhere  }  .p-sm {    padding: var(--spacing-sm)  }}

두 카드의 내용과 컴포넌트 클래스는 같습니다. 첫 번째 카드의 패딩은 24px입니다. 두 번째 카드에는 p-sm을 추가했으므로 루트 글꼴 크기가 16px인 이 미리보기에서는 패딩이 12px이 됩니다. 모서리 반경, 테두리, 표면 스타일은 그대로입니다.

프리셋은 일반 선언에 다음 순서를 적용합니다.

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

p-sm 유틸리티는 HTML 속성 안에서 클래스가 어디에 있든 컴포넌트의 패딩 선언보다 우선합니다. 순서와 적용 범위는 캐스케이드 규약에서 설명합니다.

이 유틸리티는 패딩만 바꿉니다. 컴포넌트를 대체하거나 다른 선언을 제거하지 않습니다. 따라서 작은 개별 조정을 위해 새로운 컴포넌트 변형이나 !important 선언을 추가할 필요가 없습니다.

#네이티브 규칙을 의도한 레이어에 두기

어떤 레이어에도 속하지 않는 일반 규칙은 이름 있는 레이어 안의 일반 규칙보다 우선합니다. 유틸리티가 컴파일되었는데도 효과가 없다면 레이어 밖에 있는 컴포넌트 규칙을 확인하세요.

/* This normal rule wins over a layered padding utility. */.collection-card {  padding: 1.5rem;}

유틸리티가 해당 공통 규칙을 재정의할 수 있어야 한다면 @layer components 안으로 옮기세요. 의도하지 않은 레이어 경계를 보완하려고 !important를 추가하지 마세요.

레이어가 캐스케이드의 다른 규칙을 대체하지는 않습니다. 중요도는 일반 레이어 우선순위보다 먼저 고려되며, !important는 레이어 사이의 순서를 뒤집습니다. 인라인 선언, 애니메이션, 전환에도 각각의 우선순위가 있습니다. 이 규칙은 CSS 캐스케이드 명세를, 프리셋의 순서는 Master CSS 레이어 규약을 참고하세요.

#경합하는 선언 진단하기

브라우저 개발자 도구에서 요소를 선택하고 계산된 스타일에서 해당 속성을 찾은 뒤, 최종 적용된 선언을 확인하세요.
두 규칙이 모두 해당 요소를 대상으로 하고 각 조건도 충족하는지 확인하세요.
각 선언이 속한 레이어를 확인하세요. 레이어 밖의 네이티브 CSS도 포함해서 살펴보세요.
개별 재정의를 추가하기 전에 광범위한 기본 스타일을 의도한 레이어에 두세요.
레이어 순서만으로 결과를 설명할 수 없다면 중요도와 네이티브 캐스케이드 규칙을 확인하세요.

일반적인 Master CSS 진입점을 통해 기본 스타일시트를 불러오세요. 생성된 규칙에는 레이어 블록이 포함되지만, 기본 레이어 순서를 정하는 문장을 스스로 추가하지는 않습니다.

collection-card p-sm을 p-sm collection-card로 바꾸어도 해결되지 않습니다. HTML의 클래스 순서는 캐스케이드를 제어하지 않습니다. 같은 조건의 두 유틸리티가 겹친다면 코드 린트로 충돌을 찾은 뒤 어떤 선언을 유지할지 확인하세요.

캐스케이드 레이어

#개요

#특정 인스턴스의 컴포넌트 스타일 재정의하기

#네이티브 규칙을 의도한 레이어에 두기

#경합하는 선언 진단하기