대상 좁히기
가장 넓은 선택자부터 시작태그 선택자는 넓고 클래스 선택자는 컴포넌트 단위 스타일에 적합합니다.
관계 표현
DOM 구조를 선택자에 반영자손과 자식 선택자는 범위가 다르므로 구조 변화에 얼마나 약한지 함께 봅니다.
상태 분기
hover, focus, before처럼 상황을 표현가상 클래스는 상태를, 가상 요소는 실제 DOM에 없는 조각을 스타일링합니다.
선택자 작성 기준
- ID 선택자는 강하므로 재사용 컴포넌트 스타일에는 신중하게 씁니다.
- 선택자가 길어질수록 HTML 구조 변경에 약해지는지 확인합니다.
- 충돌이 생기면 선언 위치보다 specificity를 먼저 계산합니다.
우선순위 감각
태그
낮음
p, button
클래스
중간
.card
ID
높음
#header