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

> Clean Markdown view of GeekNews topic #17078. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=17078](https://news.hada.io/topic?id=17078)
- GeekNews Markdown: [https://news.hada.io/topic/17078.md](https://news.hada.io/topic/17078.md)
- Type: news
- Author: [ragus](https://news.hada.io/@ragus)
- Published: 2024-10-04T15:00:56+09:00
- Updated: 2024-10-04T15:00:56+09:00
- Original source: [cirrus.twiddles.com](https://cirrus.twiddles.com/blog/2024/08/21/double-your-specificity-with-this-one-weird-trick/)
- Points: 22
- Comments: 7

## Summary

CSS 스타일링 시 발생하는 충돌 문제를 해결하기 위해 선택자를 반복 사용하여 우선순위를 높이는 방법을 소개합니다. 이 방법은 CSS Selectors Level 4 사양에 따라 허용되며, !important를 사용하는 것보다 권장되는 방식입니다. UI 라이브러리나 서드 파티 CSS와의 충돌을 효과적으로 해결할 수 있는 실용적인 접근법입니다. 그런데 보기엔 좀 이상해요.

## Topic Body

#### 문제점  
- CSS로 스타일링을 하다 보면 종종 CSS 충돌이 발생해 원하지 않는 스타일이 적용되는 경우가 있음  
- 이러한 충돌은 보통 UI 라이브러리, 서드 파티 위젯, 혹은 다른 팀에서 관리하는 CSS 코드 때문인데, 이럴 때 CSS를 마음대로 수정할 수 없는 경우가 많음.  
- 특히 UI 라이브러리나 서드 파티에서 온 CSS와 충돌하는 경우, HTML에 추가적인 class나 ID를 추가하는 것도 어려울 수 있음.  
- 게다가 충돌의 원인이 되는 CSS 코드가 매우 구체적으로 작성된 경우, 내 CSS의 우선순위를 높이기 위해 더 구체적으로 작성하는 것도 불가능할 수 있음.  
- 이때 많은 개발자들이 쉽게 !important를 사용하지만, 이는 권장되지 않는 방식임.  
  
#### 해결책  
- 선택자를 반복해서 사용하면 됨.  
- 예를 들어 `.checkbox__icon.checkbox__icon`은 단일 `.checkbox__icon`보다 높은 우선순위를 가짐.  
- 이 방식이 CSS 핵처럼 느껴질 수 있지만, [CSS Selectors Level 4 사양](https://www.w3.org/TR/selectors-4/#specificity-rules)을 보면 "Repeated occurrences of the same simple selector are allowed and do increase specificity.(단순 선택자가 반복되는 것은 허용되며, 특이성을 증가시킨다.)"라고 명시되어 있음.

## Comments



### Comment 29766

- Author: kroisse
- Created: 2024-10-07T10:00:35+09:00
- Points: 3

이제는 CSS Cascade Layers(@layer)가 주요 브라우저에서 모두 지원되니 더 이상 이런 종류의 hack에 의존하지 않아도 되겠습니다.  
  
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer  
https://caniuse.com/css-cascade-layers

### Comment 29748

- Author: gwpark
- Created: 2024-10-06T16:05:56+09:00
- Points: 1

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

### Comment 29733

- Author: dogtree
- Created: 2024-10-05T18:08:44+09:00
- Points: 1

학생 글내려

### Comment 29732

- Author: kyc1682
- Created: 2024-10-05T16:46:02+09:00
- Points: 1

흑마법 느낌이네요 ㅋㅋ

### Comment 29709

- Author: xenoside
- Created: 2024-10-04T21:31:49+09:00
- Points: 2

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

### Comment 29702

- Author: nemorize
- Created: 2024-10-04T18:38:42+09:00
- Points: 1

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

### Comment 29700

- Author: spilist2
- Created: 2024-10-04T18:31:36+09:00
- Points: 1

오 몰랐던 방법이네요