@layer 선언 및 순서

CSS 캐스케이드 레이어(@layer)는 명시도를 따르지 않고 CSS 규칙의 캐스케이드 우선순위를 명시적으로 제어하는 방법을 제공합니다. 우선순위가 낮은 레이어는 명시도가 더 높은 선택자를 사용하더라도 우선순위가 높은 레이어에 집니다.

레이어가 없으면 모든 CSS 규칙이 명시도와 소스 순서를 사용해 경쟁합니다. 이 때문에 초기화, 컴포넌트, 유틸리티 스타일이 모두 우선순위를 차지하려고 다투는 명시도 싸움이 발생합니다. 레이어를 사용하면 각 그룹에 고정되고 예측 가능한 우선순위를 부여할 수 있습니다.

하나의 문으로 레이어를 미리 선언합니다. 선언 순서가 우선순위를 결정하므로 나중에 선언된 레이어가 먼저 선언된 레이어보다 우선합니다.

@layer 선언은 스타일시트의 맨 위(또는 주요 가져오기 파일)에 있어야 합니다. 선언 이후에는 어떤 순서로든 레이어에 스타일을 추가할 수 있으며, 우선순위는 스타일을 추가한 위치가 아니라 선언 순서로 결정됩니다.

레이어 우선순위는 선언 시점에 결정되므로, 레이어가 선언되기 전이라도 앞서 참조하는 방식으로 어디에서든 해당 레이어에 스타일을 추가할 수 있습니다. 중요한 것은 선언된 순서입니다.

나중 레이어의 선언은 명시도와 관계없이 항상 우선하여 이전 레이어의 선언을 이깁니다:

어떤 레이어에도 속하지 않는 스타일을 레이어에 속하지 않는 스타일이라고 합니다. 이러한 스타일은 마지막으로 선언된 레이어보다도 높은 우선순위를 가집니다. 항상 우선해야 하는 긴급 재정의에 사용합니다.

작성자 스타일의 전체 우선순위(높은 순서부터 낮은 순서)는 다음과 같습니다:

1. 레이어에 속하지 않는 스타일(어떤 @layer 외부에 있는 스타일)
2. 마지막으로 선언된 레이어(예: 유틸리티)
3. 끝에서 두 번째 레이어(예: 컴포넌트)
4. 더 앞서 선언된 레이어(기본, 초기화)

레이어에서 !important를 사용하는 것은 주의해야 합니다. 해당 선언에서는 레이어 순서가 반전되기 때문입니다. 가장 먼저 선언된 레이어의 !important가 나중 레이어의 !important보다 우선합니다. 이는 사용자 스타일과 작성자 스타일에 대한 기존 캐스케이드 동작과 일치합니다.

레이어는 점 표기법으로 중첩할 수 있습니다:

현실적인 프로젝트 레이어 설정입니다:

레이어가 @layer base, components, utilities로 선언되어 있습니다. 충돌이 발생하면 어느 레이어의 스타일이 우선할까요?

@layer는 순서가 명시된 캐스케이드 레이어를 설정합니다. 레이어 이름은 우선순위가 낮은 것부터 순서대로 선언합니다. 나중 레이어가 명시도와 관계없이 항상 이전 레이어보다 우선합니다. 레이어에 속하지 않는 스타일은 가장 높은 우선순위를 가집니다. !important는 해당 선언에서 레이어 우선순위를 반전시킵니다.