Comment la spécificité CSS est-elle calculée ?

Question

Accepted Answer

Quand plusieurs règles ciblent le même élément, la **spécificité** décide laquelle gagne. C'est un score calculé à partir des parties du sélecteur, comparé comme un tuple `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Comparez de gauche à droite ; la première colonne qui diffère décide du gagnant.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Règles clés

- Un seul **id** l'emporte sur n'importe quel nombre de **classes** ; une seule classe l'emporte sur n'importe quel nombre d'éléments. (Vous ne pouvez pas « additionner » les niveaux inférieurs pour en battre un plus élevé.)
- Si la spécificité est **égale**, la règle qui apparaît **plus tard** dans la source gagne (ordre source).
- **`!important`** remplace entièrement la spécificité normale — un dernier recours qui est difficile à remplacer (vous auriez besoin d'un autre `!important` avec une spécificité plus élevée).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## Conseils pratiques

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Pourquoi c'est important

La plupart des frustrations « pourquoi mon CSS ne s'applique pas ? » sont dues à un conflit de spécificité — une règle plus spécifique ailleurs gagne.

Garder les sélecteurs bas et plats (privilégier les classes uniques, éviter les ids et `!important`) maintient la spécificité prévisible, de sorte que les styles restent faciles à remplacer et à maintenir.