CSS 선택자 명시도(Selector Specificity): 우선순위 전쟁에서 승리하는 방법
1. 문제의 배경
웹 개발을 하다 보면 분명히 CSS를 작성했는데 브라우저에서 반영되지 않는 당혹스러운 상황을 마주하곤 합니다. 개발자 도구를 열어보면 내가 작성한 코드는 취소선(line-through)이 그어져 있고, 다른 엉뚱한 스타일이 적용되어 있는 것을 볼 수 있죠.
이는 CSS의 C(Cascading) 원칙 중 하나인 명시도(Specificity) 때문입니다. 브라우저는 동일한 요소에 충돌하는 스타일이 정의되었을 때, 어떤 규칙이 더 "구체적인가"를 점수로 환산하여 승자를 결정합니다.
2. 해결 방안 탐색
스타일 충돌을 해결하기 위해 흔히 저지르는 실수는 크게 두 가지입니다:
- !important 남용: 당장은 해결되지만 스타일 시트의 유지보수를 불가능하게 만듭니다.
- 선택자 길게 늘어뜨리기: 명시도를 높이기 위해 불필요하게 깊은 구조의 선택자를 사용하면 성능과 재사용성이 떨어집니다.
가장 좋은 해결책은 명시도 점수 체계를 정확히 이해하고, 가능한 한 낮은 명시도를 유지하면서 일관성 있는 선택자 전략(예: BEM)을 사용하는 것입니다.
3. 핵심 개념 및 아키텍처
명시도는 4개의 숫자로 이루어진 가중치 시스템으로 이해할 수 있습니다. 각 카테고리의 점수는 서로 다른 자릿수를 차지하며, 낮은 단계의 점수가 아무리 많아도 높은 단계의 점수를 넘을 수 없습니다.
점수 배점표
- Inline Styles: HTML
style속성에 직접 작성 (1-0-0-0) - ID Selectors:
#header(0-1-0-0) - Classes / Attributes / Pseudo-classes:
.link,[href],:hover(0-0-1-0) - Elements / Pseudo-elements:
div,::before(0-0-0-1)
4. 구현 및 트러블슈팅
실제 코드를 통해 점수가 어떻게 계산되는지 살펴보겠습니다.
사례 분석: 우선순위 전쟁
/* 1. 요소(1) + 속성(10) = 11점 */ a[href="https://hooneylog.com"] { color: green; } /* 2. 요소(1) + 클래스(10) + 요소(1) = 12점 (승리!) */ section.link a { color: red; }
위의 예시에서 section.link a가 12점으로 더 높기 때문에 텍스트는 빨간색이 됩니다. 만약 여기서 녹색으로 바꾸고 싶다면 어떻게 해야 할까요?
트러블슈팅: !important의 위험성
color: green !important;를 사용하면 즉시 해결되지만, 이는 스타일 종속성을 파괴합니다. 나중에 이 속성을 다시 덮어쓰려면 또 다른 !important와 더 높은 명시도를 동원해야 하는 악순환에 빠지게 됩니다.
대신 선택자를 정교화하세요:
/* 100점(ID) 추가로 명시도 압도 */ #main-nav a[href="https://hooneylog.com"] { color: green; }
5. 결과 및 Trade-off
결과
- 예측 가능한 스타일링: 명시도 규칙을 알면 스타일이 왜 안 먹히는지 즉시 디버깅이 가능합니다.
- 클린 코드: 불필요한
!important를 제거하여 코드의 투명성이 높아집니다.
Trade-off
- 설계의 비용: 명시도를 낮게 유지하려다 보면 초기 CSS 아키텍처(BEM 등) 설계에 시간이 더 소요될 수 있습니다. 하지만 이는 장기적인 유지보수 비용을 획기적으로 낮춰줍니다.
6. 마치며
명시도는 CSS 개발자라면 반드시 마스터해야 하는 기본기입니다. 가장 좋은 전략은 "필요한 만큼만 구체적으로 작성하고, 가능한 한 낮은 점수를 유지하는 것"입니다. ID 선택자보다는 클래스를 활용하고, 인라인 스타일은 가급적 지양하는 습관을 들이세요.
참고 자료: