La cascade CSS

Qu'est-ce que la cascade ?

Le « C » de CSS signifie Cascading (en cascade). Quand plusieurs règles CSS ciblent le même élément avec des propriétés conflictuelles, le navigateur doit décider laquelle gagne. Cet algorithme de résolution est la cascade.

  L'algorithme de la cascade (simplifié) :
  ────────────────────────────────────
  1. Origine & importance  (auteur vs utilisateur vs navigateur)
  2. Spécificité           (le sélecteur est-il ciblé ?)
  3. Ordre source          (quelle règle vient en dernier ?)
  ────────────────────────────────────

La spécificité

La spécificité est un poids qui détermine quelle règle CSS a la priorité. Elle est calculée comme un tuple de trois nombres : (IDs, Classes, Éléments).

/* Spécificité : (0, 0, 1) — un élément */
p { color: black; }

/* Spécificité : (0, 1, 0) — une classe */
.highlight { color: blue; }

/* Spécificité : (1, 0, 0) — un ID */
#titre { color: red; }

/* Spécificité : (0, 1, 1) — une classe + un élément */
p.highlight { color: green; }

  Comparaison de spécificité :
  ────────────────────────────
  p              → (0, 0, 1)
  .highlight     → (0, 1, 0)  ← gagne sur p
  #titre         → (1, 0, 0)  ← gagne sur .highlight
  style en ligne → (1, 0, 0, 0) ← gagne sur tout
  ────────────────────────────

L'héritage

Certaines propriétés CSS sont héritées par les éléments enfants. Les propriétés typographiques comme color, font-family et line-height sont héritées. Les propriétés de layout comme margin, padding et border ne le sont pas.

body {
  color: #333;           /* Hérité par TOUS les descendants */
  font-family: sans-serif; /* Hérité */
}

.card {
  border: 1px solid #ddd; /* NON hérité */
  padding: 16px;          /* NON hérité */
}

L'ordre source

Quand deux règles ont la même spécificité, la dernière déclarée gagne. C'est pourquoi l'ordre de vos fichiers CSS et de vos règles compte.

/* Même spécificité (0, 1, 0) */
.text { color: blue; }
.text { color: red; }
/* Résultat : red gagne (déclaré en dernier) */

!important

L'annotation !important surcharge toutes les règles de spécificité. À utiliser avec parcimonie — elle rend le CSS difficile à maintenir.

Résumé