CSS specificity는 어떻게 계산되나요?

Question

Accepted Answer

여러 규칙이 같은 요소를 타겟팅할 때 어느 것이 이기는지 **specificity**가 결정합니다. selector의 구성 요소로부터 계산된 점수이며, 튜플 `(ids, classes, elements)`로 비교됩니다.

```text
인라인 스타일   → 1,0,0,0  (!important를 제외하면 가장 높음)
ID             → 0,1,0,0
클래스 / 속성 / pseudo-class → 0,0,1,0
요소 / pseudo-element        → 0,0,0,1
전체(*)        → 0,0,0,0  (가중치 없음)
```

왼쪽에서 오른쪽으로 비교하며, 처음으로 차이가 나는 열이 승자를 결정합니다.

```css
#nav .item a   { color: red; }   /* id 1, 클래스 1, 요소 1 → 1,1,1 */
.menu .item a  { color: blue; }  /* id 0, 클래스 2, 요소 1 → 0,2,1 */
/* red 승리 — id가 하나라도 있으면 아무리 많은 클래스보다 우선 */
```

## 핵심 규칙

- 단 하나의 **id**가 아무리 많은 **클래스**보다 우선하고, 단 하나의 클래스가 아무리 많은 요소보다 우선합니다. (낮은 등급을 "합산"해서 높은 등급을 이길 수 없습니다.)
- specificity가 **같으면**, 소스에서 **나중에** 나오는 규칙이 이깁니다(소스 순서).
- **`!important`**는 일반 specificity를 완전히 무시합니다 — 덮어쓰기 어려운 최후의 수단입니다(더 높은 specificity의 또 다른 `!important`가 필요함).

```css
.btn { color: blue !important; } /* ⚠️ 거의 모든 것을 이김 — 피할 것 */
```

## 실무 지침

```css
/* ❌ 너무 구체적이라 나중에 덮어쓰기 어려움 */
#sidebar ul li.active a { }
/* ✅ 평평하게 유지 — 단일 클래스 → 관리하기 쉬움 */
.nav-link--active { }
```

## 왜 중요한가

대부분의 "왜 내 CSS가 적용되지 않지?" 하는 좌절감은 specificity 충돌입니다 — 다른 곳의 더 구체적인 규칙이 이기고 있는 것입니다.

selector를 낮고 평평하게 유지하면(단일 클래스 선호, id와 `!important` 회피) specificity가 예측 가능해져 스타일을 덮어쓰고 유지보수하기 쉬워집니다.