@layer 캐스케이드 레이어

개념 이해하기

cascade layer는 선택자 specificity를 서로 경쟁시키지 않고 reset, base, components, utilities 같은 그룹의 우선순서를 정합니다. 일반 선언은 나중에 선언된 layer가 앞 layer보다 우선하며, layer 밖의 일반 스타일은 layer 안의 일반 스타일보다 우선합니다. important 선언의 layer 순서는 반대로 동작하므로 남용하지 않습니다.

첫 줄의 @layer 선언이 세 레이어의 순서를 미리 정해 두므로 base보다 components가, components보다 utilities가 우선합니다. 두 상자에는 base와 components의 .target 규칙이 모두 걸려 초록 바탕에 흰 글자가 되고, components가 건드리지 않은 padding 14px는 base에서 그대로 옵니다. utilities의 .highlight는 HTML에 그 class를 가진 요소가 없어 지금은 아무 효과가 없습니다.

외부 스타일시트를 @import url(reset.css) layer(base)처럼 앞쪽 레이어에 통째로 넣으면, 그 안의 선택자가 아무리 구체적이어도 뒤 레이어의 컴포넌트 규칙을 이기지 못합니다. 레이어 안에 다시 레이어를 둘 수도 있으며, 이때는 components.card처럼 점으로 이어 이름을 붙입니다.