레이어로 이긴다

목표

@layer 를 쓴 스타일시트를 쓰고, 어느 선언이 이기는지를 계산기로
확인합니다. 브라우저가 없어도 이 답은 하나입니다.

왜 중요한가

정렬 순서에서 레이어는 특정성보다 먼저 갈립니다. 그래서 레이어를 쓰기
시작하면 "특정성이 높은데 왜 지지?" 라는 질문이 생기고, 그 답을 모르면
사람들은 다시 !important 로 돌아갑니다.

규칙은 두 줄입니다. 레이어에 넣지 않은 선언은 맨 마지막 레이어에
들어가고, 일반 선언은 뒤 레이어가 이기고 !important 는 앞 레이어가
이깁니다. 이 두 줄이 합쳐지면 레이어 밖 일반 선언은 가장 세고, 레이어 밖
!important 는 가장 약해집니다.

만들 것

/root/work/layers/theme.css 하나와 예측 파일 둘입니다. HTML 은 필요
없습니다 — 채점기가 아래 요소들을 가정하고 캐스케이드를 풉니다.

div#app > article.card > h2.titlediv#app > article.card > h2.title.u-hiddendiv#app > article.card > a.btn.primarydiv.toolbar > button.btn

계산기

cd /root/work/layerspython3 /opt/lab/checks/css-layer-lab/layercalc.py theme.css

선언마다 레이어 · 미디어 조건 · 특정성 · 순서를 보여 주고, 맨 위에
레이어 순서를 찍습니다. 다루지 못하는 선택자를 만나면 조용히 넘기지 않고
"해석할 수 없다" 고 말합니다.

단계

1. @layer reset, base, components, utilities; 를 맨 위에
2. 네 레이어를 채우고 뒤 레이어가 이기는 것을 확인
3. 레이어 밖 규칙이 특정성이 낮은데도 이긴다 → 03-predict.txt
4. !important 는 순서를 뒤집는다 → 04-predict.txt
5. :where() 로 특정성 0 인 기본값
6. 유틸리티가 특정성 없이 컴포넌트를 이긴다
7. 계산기 결과를 07-resolve.txt 로
8. 레이어 밖 !important 를 없앤다
9. 정리 → 09-notes.md

참고

• 이 계산기는 :where() 와 :is() 를 다루지만 **괄호 안에 결합자가 들어간

선택자**는 다루지 않습니다. :where(.title) 처럼 하나만 넣으세요.

• 예측 파일을 먼저 쓰고 나서 계산기를 돌리세요. 순서를 바꾸면 배우는 것이

사라집니다.

단계 9개

1. 레이어 순서를 못 박는다
2. 뒤 레이어가 이긴다
3. 레이어 밖이 가장 세다
4. important 는 순서를 뒤집는다
5. 특정성 0 인 기본값
6. 유틸리티가 특정성 없이 이긴다
7. 계산기로 확인한다
8. 레이어 밖 important 를 없앤다
9. 왜 특정성이 볼 차례가 아닌가