@layer로 스타일 출처 그룹의 우선순서를 명시적으로 관리합니다.
cascade layer는 선택자 specificity를 서로 경쟁시키지 않고 reset, base, components, utilities 같은 그룹의 우선순서를 정합니다. 일반 선언은 나중에 선언된 layer가 앞 layer보다 우선하며, layer 밖의 일반 스타일은 layer 안의 일반 스타일보다 우선합니다. important 선언의 layer 순서는 반대로 동작하므로 남용하지 않습니다.
이번 예제의 출발점은 @layer reset, base, components, utilities;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 layer 선언 순서를 바꾸고 target의 최종 배경색을 예측하세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
layer가 specificity를 없애는 것은 아닙니다. 같은 layer 안에서는 여전히 specificity와 작성 순서를 비교합니다.
직접 바꿔보세요layer 선언 순서를 바꾸고 target의 최종 배경색을 예측하세요.