캐스케이드 레이어로 유틸리티 싸움을 끝냈다

Callout 에 기본 배경을 주고 쓰는 쪽에서 bg-surface-muted 로 덮으려 했는데 안 먹었다. 둘 다 클래스 하나짜리 선택자라, 이기고 지는 게 파일이 번들에 실린 순서로 정해졌다.

순서가 아니라 층으로 말하기

@layer base, components, utilities;

한 줄로 층의 서열을 먼저 못박아 두면, 그 뒤로는 어느 파일이 먼저 실리든 상관이 없다. components 안의 선택자는 아무리 구체적이어도 utilities 를 이기지 못한다.

남은 함정

• 레이어 밖에 남은 규칙은 모든 레이어를 이긴다. 층을 쓰기로 했으면 전부 넣어야 한다
• !important 는 층 서열을 거꾸로 뒤집는다. 알고 쓰면 도구, 모르고 쓰면 사고다

색 토큰을 어디에 둘지는 좌측 네비를 폴더 트리에 맡겼다 에서 한 번 더 걸렸던 문제다.