Comment la cascade et l'héritage décident-ils quels styles s'appliquent ?

Question

Accepted Answer

Quand plusieurs règles pourraient styliser un élément, deux mécanismes décident du résultat : la **cascade** (quelle règle gagne) et l'**héritage** (quelles propriétés se transmettent des parents aux enfants).

## Pourquoi c'est important

Le navigateur choisit la déclaration gagnante en vérifiant, par ordre de priorité :

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## L'héritage — certaines propriétés se transmettent aux enfants

Certaines propriétés (principalement **liées au texte**) sont héritées automatiquement par les descendants ; la plupart ne le sont pas.

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**Héritées** par défaut : `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Non héritées** : `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Contrôler l'héritage explicitement

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Récapitulatif de la spécificité au sein de la cascade

C'est pourquoi une règle de faible spécificité peut perdre même si elle est écrite plus tard — la spécificité est vérifiée *avant* l'ordre du code. Comprendre l'ordre (importance → spécificité → ordre du code) explique presque tous les cas de « mon style ne s'applique pas ».

## Pourquoi c'est important

La cascade et l'héritage sont le modèle fondamental de *comment CSS se résout réellement*.

Connaître l'ordre de précédence débogue les conflits, savoir quelles propriétés s'héritent permet de définir `color`/`font` une seule fois sur `body` au lieu de partout, et `inherit`/`initial`/`unset` vous donnent un contrôle précis — ensemble, ils rendent CSS prévisible plutôt que magique.