CSS 선택자 우선순위를 높이는 의외의 방법

문제점

• 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.(단순 선택자가 반복되는 것은 허용되며, 특이성을 증가시킨다.)"라고 명시되어 있음.

[kroisse]

이제는 CSS Cascade Layers(@layer)가 주요 브라우저에서 모두 지원되니 더 이상 이런 종류의 hack에 의존하지 않아도 되겠습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers

[gwpark]

오 그래서 styled-components에서 &&을 쓰는 방법으로 스타일을 덮어쓰는 거군요?

[dogtree]

학생 글내려

[kyc1682]

흑마법 느낌이네요 ㅋㅋ

[xenoside]

이제 이런 코드를 보게 되겠네요.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon

[nemorize]

오 이걸 몰랐네요...
상황에 따라 선택자를 여러번 반복시키는 전처리기를 만들어 사용해 볼 수도 있겠어요.

[spilist2]

오 몰랐던 방법이네요