캐스케이드: 출처와 순서

캐스케이드는 여러 규칙이 동일한 요소의 동일한 속성을 대상으로 할 때 어떤 스타일 선언이 우선하는지를 결정하는 CSS 알고리즘입니다. 캐스케이드는 출처, 중요도, 명시도, 소스 순서를 고려합니다.

CSS 선언은 우선순위에 따라 다음 세 가지 출처에서 제공됩니다.

1. 사용자 에이전트 스타일시트 — 브라우저 기본값
2. 사용자 스타일시트 — 사용자가 설정한 사용자 지정 스타일(접근성)
3. 작성자 스타일시트 — 사용자의 CSS 파일

일반 선언(important가 아닌 선언)에서는 작성자 스타일이 사용자 스타일보다 우선하고, 사용자 스타일이 사용자 에이전트 스타일보다 우선합니다. 따라서 사용자의 CSS가 브라우저 기본값보다 우선합니다.

!important를 추가하면 해당 선언의 출처 순서가 뒤집힙니다.

1. 사용자 에이전트 !important
2. 사용자 !important — 가장 높은 우선순위(접근성)
3. 작성자 !important

따라서 사용자 접근성 재정의(예: 강제 색상)는 작성자 CSS로 무효화할 수 없습니다.

동일한 출처의 두 선언이 경쟁할 때는 명시도가 우선 여부를 결정합니다. 명시도가 더 높은 선언이 우선합니다. CSS를 디버깅할 때 개발자가 가장 먼저 떠올리는 개념이 바로 이것입니다.

두 규칙의 명시도가 동일하면 스타일시트에서 더 나중에 나타나는 규칙이 우선합니다. 이것이 "소스 순서" 규칙입니다. 따라서 @import 문과 @keyframe 선언의 순서가 중요합니다.

CSS 캐스케이드 레이어(@layer)는 출처와 명시도 사이에 새로운 캐스케이드 단계를 추가합니다. 레이어 순서가 우선순위를 결정하며, 더 나중 레이어의 선언은 명시도와 관계없이 더 이른 레이어의 선언보다 우선합니다.

전체 우선순위(높은 순서부터 낮은 순서)는 다음과 같습니다.

1. 출처 + 중요도(!important 사용자, !important 작성자)
2. 애니메이션 값
3. CSS 레이어(더 나중 레이어가 우선)
4. 명시도
5. 소스 순서
6. 전환 값

상속은 캐스케이드와 다릅니다. 상속된 값은 부모 요소의 계산된 스타일에서 가져옵니다. 명시도가 낮은 규칙에서 가져온 값이라도 직접 적용된 값보다 우선하지 못합니다.

더 구체적인 변형 스타일을 스타일시트에서 기본 스타일 뒤에 배치하십시오. 따라서 컴포넌트 파일은 초기화 및 기본 파일보다 나중에 가져와야 합니다.

DevTools 스타일 패널에서는 규칙이 우선순위가 높은 순서부터 낮은 순서로 나열됩니다. 취소선이 그어진 규칙은 캐스케이드 경쟁에서 졌다는 뜻입니다. 규칙 위에 마우스를 올리면 디버깅에 필요한 소스 파일과 줄 번호를 확인할 수 있습니다.

두 규칙이 동일한 명시도로 같은 속성을 대상으로 합니다. 어느 규칙이 우선합니까?

캐스케이드는 출처(작성자 > 사용자 > 브라우저), 중요도(!important는 순서를 뒤집음), @layer 순서, 명시도, 소스 순서에 따라 스타일 충돌을 해결합니다. 캐스케이드를 이해하면 어떤 충돌에서 어떤 규칙이 우선하는지 정확히 예측할 수 있으므로 더 이상 추측할 필요가 없습니다.