레이어 우선순위와 !important의 상호 작용

일반(!important가 아닌) 선언의 캐스케이드 우선순위는 다음과 같습니다.

1. 레이어에 속하지 않은 스타일(가장 높음)
2. 가장 나중에 선언된 레이어
3. 더 일찍 선언된 레이어(가장 낮음)

!important 선언에서는 우선순위가 반대로 바뀝니다.

1. 레이어에 속하지 않은 스타일의 !important(!important 계층에서 가장 낮음)
2. 처음 선언된 레이어의 !important(가장 높음)
3. 나중에 선언된 레이어의 !important(더 낮음)

이러한 역전은 원래 캐스케이드에서 사용자와 작성자의 !important 선언이 작동하는 방식을 반영합니다. 사용자 !important는 접근성 설정을 보호하기 위해 작성자 !important보다 우선하며, 동일한 논리가 레이어에도 적용됩니다. 더 이른(더 근본적인) 레이어가 !important에서 우선됩니다.

일반 선언과 !important 선언의 우선순위를 비교해 보겠습니다.

레이어에서 허용되는 사용 사례는 다음과 같습니다.

• 리셋/정규화 레이어: 어떤 컴포넌트도 필수 리셋을 재정의하지 못하도록 !important 사용
• 접근성 유틸리티: 숨김 유틸리티에 display: none !important 사용
• 동작 감소 리셋: animation: none !important 사용

컴포넌트 레이어에서는 절대로 !important를 사용하지 마십시오. 레이어의 목적을 무력화하고 디버깅하기 어려운 우선순위 문제를 만듭니다. 유틸리티가 우선되도록 레이어 순서를 사용하십시오.

레이어에 속하지 않은 !important는 !important 계층에서 가장 낮은 우선순위를 가집니다. 따라서 리셋 레이어의 !important가 레이어에 속하지 않은 !important를 재정의합니다. 이는 직관에 어긋나는 결과입니다.

작성자 출처 안에서는 레이어가 선언의 순서를 정합니다. 하지만 사용자 에이전트 !important와 사용자 !important는 작성자 출처의 모든 선언(!important 사용 여부와 관계없이)보다 여전히 우선합니다. 전체 캐스케이드 순서는 다음과 같습니다.

1. 사용자 에이전트 !important
2. 사용자 !important
3. 작성자 !important(레이어 순서에서는 첫 번째 레이어가 우선)
4. 작성자 일반 선언(레이어 순서에서는 마지막 레이어가 우선)
5. 사용자 일반 선언
6. 사용자 에이전트 일반 선언

프로젝트에서 레이어 우선순위를 확인하려면 서로 다른 레이어에 의도적으로 충돌하는 규칙을 작성하고 DevTools에서 어떤 규칙이 우선되는지 확인하십시오. Styles 패널에는 우선 적용된 규칙이 어느 레이어에서 왔는지가 표시됩니다.

@layer를 도입하면 대부분의 컴포넌트 CSS에서 특이성이 덜 중요해집니다. 더 단순하고 특이성이 낮은 선택자를 작성한 뒤 우선순위는 레이어 순서에 맡길 수 있으므로, 특이성 충돌을 크게 줄일 수 있습니다.

레이어가 @layer reset, components, utilities로 선언되어 있습니다. reset 레이어에 있는 !important 선언과 utilities 레이어에 있는 또 다른 선언 중 어느 것이 우선될까요?

일반 선언에서는 나중 레이어가 우선됩니다. !important에서는 첫 번째 레이어가 우선됩니다. 레이어에 속하지 않은 !important는 !important 계층에서 가장 낮은 우선순위를 가집니다. !important는 리셋 레이어와 접근성 레이어에서만 사용하십시오. 레이어를 사용하면 더 단순한 선택자를 작성하고 특이성 대신 레이어 순서로 우선순위를 처리할 수 있습니다.