이기는 규칙을 계산한다

목표

CSS 가 예측 불가능해 보이는 것은 규칙이 없어서가 아니라 **규칙이 세
단계**라서입니다. 중요도 → 특정성 → 순서.

브라우저가 없으니 "보기에 맞는가" 는 채점하지 않습니다. 대신 **어떤
규칙이 이기는가** 를 실제로 계산합니다 — 그건 브라우저 없이도 답이
하나입니다.

만들 것

/root/work/css/styles.css 하나입니다. HTML 은 필요 없습니다.
채점기가 아래 요소들을 가정하고 캐스케이드를 풉니다.

div#app > div.cardmain.lessonLayout > aside.lessonSidemain.lessonLayout.sideHidden > aside.lessonSidediv.toolbar

계산기

cd /root/work/csspython3 /opt/lab/checks/css-lab/cascade.py styles.css

규칙마다 순서 · 미디어 조건 · 특정성을 보여 줍니다. 다루는 범위는
태그·클래스·아이디·의사클래스·자손/자식 결합자·콤마 그룹, 그리고
@media (max-width|min-width: Npx) 입니다. 그 밖의 선택자를 만나면
조용히 넘기지 않고 "해석할 수 없다" 고 말합니다.

단계

1. :root 토큰 3개 + var() 3곳
2. 특정성 예측 → 02-spec.txt
3. !important 없이 이기기
4. 순서 함정 (기본 규칙을 미디어 쿼리 위로)
5. 3칸 그리드
6. 접으면 1칸
7. 플렉스 툴바
8. 계산기 → 08-cascade.txt
9. 정리 → 09-notes.md

참고

4단계와 6단계는 이 서비스에서 실제로 났던 버그입니다. 모바일 목차
덮개가 안 열리던 것과, 목차를 접으면 페이지가 33,000px 로 늘어나던 것.

단계 9개

토큰을 :root 에 둔다
특정성을 계산해 본다
!important 없이 이긴다
순서 함정을 피한다
골격을 그리드로
접으면 칸도 없어져야 한다
툴바는 플렉스로
계산기로 확인한다
왜 졌는지 설명한다