CSS 선택자 우선순위 지도
선택자는 요소를 찾는 문법이고, 우선순위는 충돌했을 때 어떤 선언이 이기는지 결정하는 규칙입니다.
대상 좁히기
가장 넓은 선택자부터 시작 · 태그 선택자는 넓고 클래스 선택자는 컴포넌트 단위 스타일에 적합합니다.
관계 표현
DOM 구조를 선택자에 반영 · 자손과 자식 선택자는 범위가 다르므로 구조 변화에 얼마나 약한지 함께 봅니다.
상태 분기
hover, focus, before처럼 상황을 표현 · 가상 클래스는 상태를, 가상 요소는 실제 DOM에 없는 조각을 스타일링합니다.
핵심CSS 선택자 우선순위 지도은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.