CSS Cascade Layers: 레이어 우선순위와 선택자 특이성의 관계
CSS cascade layer는 규칙의 우선순위를 선언 순서로 관리해 선택자 특이성 경쟁을 줄이는 방법입니다. 일반 선언과 !important 선언의 레이어 순서, 레이어 밖 규칙의 우선순위를 함께 살펴봅니다.
발행·오류 제보: infostoa · 편집 기준
이 글의 개별 작성자와 전문 검토자 정보는 제공되지 않습니다.
CSS에서 특정 규칙이 적용되지 않을 때 선택자의 특이성을 계속 높이면 나중에 더 큰 충돌을 만들 수 있습니다. Cascade layer는 규칙을 이름 있는 층에 배치해 층의 우선순위를 먼저 결정하는 기능입니다. 같은 출처와 중요도 조건에서는 선언이 어느 레이어에 속하는지가 선택자 특이성보다 먼저 평가됩니다. 따라서 기반 스타일, 컴포넌트 스타일, 예외 스타일의 관계를 CSS 구조로 표현할 수 있습니다.
1. 특이성보다 먼저 정해지는 레이어 순서
Cascade는 단순히 “선택자가 가장 구체적인 규칙이 이긴다”로 끝나지 않습니다. 출처와 중요도, cascade layer, 선택자 특이성, 소스 순서 등 여러 기준을 정해진 순서로 비교합니다. 레이어를 쓰면 같은 중요도의 규칙끼리 먼저 레이어 순서를 비교하므로, 낮은 우선순위 레이어에 있는 높은 특이성 선택자가 뒤 레이어의 정상 선언을 자동으로 이기지는 않습니다.
레이어는 첫 등장 순서가 중요합니다. @layer reset, base, components, utilities;처럼 순서를 먼저 선언하면 파일을 나누거나 가져와도 의도한 관계를 읽기 쉽습니다. 이후 각 블록에서 @layer components { ... }와 같이 규칙을 넣습니다. 같은 이름을 다시 사용하면 기존 레이어에 규칙이 추가됩니다. 선언 위치가 뒤라고 해서 레이어의 원래 순서가 매번 바뀌지는 않습니다.
2. 일반 선언과 레이어 밖 규칙
일반 author 선언에서는 뒤에 선언한 레이어가 앞 레이어보다 우선합니다. 레이어에 속하지 않은 일반 선언은 레이어 안의 일반 선언보다 우선순위가 높습니다. 그래서 기존 스타일시트에서 레이어를 점진적으로 도입할 때, 레이어 밖에 남은 규칙이 새 레이어 전체를 덮을 수 있습니다. 반대로 기존의 강한 규칙을 단순히 레이어로 감쌌다고 해서 이전과 같은 결과가 유지되는 것도 아닙니다.
먼저 영향 범위를 좁힌 작은 요소에 레이어를 적용하고, 개발자 도구에서 실제로 이긴 선언과 계산된 값을 확인하는 편이 안전합니다. 각 CSS 파일을 어디서 import했는지, 규칙이 레이어 안에 있는지 밖에 있는지 함께 살펴보세요. Cascade layers는 규칙을 분류하는 수단이지, 출처·중요도·상속·인라인 스타일 등 cascade의 모든 기준을 없애는 스위치는 아닙니다.
3. !important는 레이어 순서를 뒤집는다
!important가 붙은 선언은 일반 선언과 같은 레이어 순서로 비교되지 않습니다. 레이어 안에서 중요한 선언의 우선순위는 레이어 순서를 역전합니다. 일반 선언에서 뒤 레이어가 우선했다면, 중요한 선언끼리는 먼저 선언된 레이어가 우선합니다. 레이어 밖의 중요한 선언도 레이어 안의 중요한 선언과 다른 위치에 놓입니다. 따라서 “마지막 레이어가 항상 이긴다”는 규칙은 일반 선언에만 적용됩니다.
이 역전은 사용자 스타일이나 브라우저 스타일을 포함한 cascade의 중요 선언 처리와 맞물려 있으므로, 레이어를 쓴다는 이유로 !important의 효과가 단순해지는 것은 아닙니다. 꼭 필요한 중요 선언이 있다면 어느 레이어와 출처에 있는지 기록하고, 일반 규칙을 더 명확히 설계해 중요 선언이 늘어나는 일을 막으세요. 레이어는 강제 재정의의 대체물이 아닙니다.
4. 실무자 관점: 기존 코드에 적용하고 충돌을 진단하는 순서
첫째, 프로젝트의 규칙을 reset, 기반 스타일, 컴포넌트, 유틸리티처럼 실제 책임에 따라 나눕니다. 둘째, 별도 @layer 선언으로 전체 순서를 정하고, import 규칙이 그 순서보다 앞서거나 뒤서지 않는지 확인합니다. 셋째, 대표적인 페이지에서 의도한 속성의 computed style과 취소선 표시를 확인합니다. 여전히 충돌한다면 선언의 origin, importance, layer, specificity, source order를 그 순서로 추적합니다.
팀이나 플러그인이 만든 CSS를 관리할 때 레이어는 각 집합의 경계를 명시하는 데 도움이 됩니다. 다만 레이어 이름만으로 규칙의 품질이나 격리가 보장되지는 않습니다. 레이어 밖 CSS, !important, 스타일시트 로딩 순서가 남아 있으면 결과가 예상과 다를 수 있습니다. 도입은 한 페이지나 컴포넌트부터 시작해 기존 cascade와 새 레이어의 실제 승패를 검토하고 범위를 넓히세요.