CSS 선택자 우선순위를 높이는 의외의 방법
(cirrus.twiddles.com)문제점
- CSS로 스타일링을 하다 보면 종종 CSS 충돌이 발생해 원하지 않는 스타일이 적용되는 경우가 있음
- 이러한 충돌은 보통 UI 라이브러리, 서드 파티 위젯, 혹은 다른 팀에서 관리하는 CSS 코드 때문인데, 이럴 때 CSS를 마음대로 수정할 수 없는 경우가 많음.
- 특히 UI 라이브러리나 서드 파티에서 온 CSS와 충돌하는 경우, HTML에 추가적인 class나 ID를 추가하는 것도 어려울 수 있음.
- 게다가 충돌의 원인이 되는 CSS 코드가 매우 구체적으로 작성된 경우, 내 CSS의 우선순위를 높이기 위해 더 구체적으로 작성하는 것도 불가능할 수 있음.
- 이때 많은 개발자들이 쉽게 !important를 사용하지만, 이는 권장되지 않는 방식임.
해결책
- 선택자를 반복해서 사용하면 됨.
- 예를 들어
.checkbox__icon.checkbox__icon은 단일.checkbox__icon보다 높은 우선순위를 가짐. - 이 방식이 CSS 핵처럼 느껴질 수 있지만, CSS Selectors Level 4 사양을 보면 "Repeated occurrences of the same simple selector are allowed and do increase specificity.(단순 선택자가 반복되는 것은 허용되며, 특이성을 증가시킨다.)"라고 명시되어 있음.
이제는 CSS Cascade Layers(@layer)가 주요 브라우저에서 모두 지원되니 더 이상 이런 종류의 hack에 의존하지 않아도 되겠습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
이제 이런 코드를 보게 되겠네요.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon