Cascade et spécificité

Avant de parler de design, il faut comprendre pourquoi une règle gagne face à une autre.

La cascade

Le navigateur décide quelle déclaration appliquer avec trois critères principaux :

• l'origine de la règle (navigateur, utilisateur, auteur)
• l'importance (!important)
• l'ordre d'apparition dans la feuille

À importance égale, la règle écrite plus bas gagne.

La spécificité

Chaque sélecteur a un "poids" :

• sélecteur de type (h1, p) : faible
• classe, pseudo-classe, attribut (.card, :hover, [type="text"]) : moyen
• id (#hero) : élevé
• style inline : très élevé

Raccourci pratique :

• privilégie les classes
• évite les chaînes trop longues
• évite !important sauf cas justifié

Exemple

/* Spécificité faible */
p {
  color: #334155;
}

/* Spécificité moyenne */
.article p {
  color: #0f172a;
}

/* Spécificité élevée */
#intro {
  color: #1d4ed8;
}

Dans cet exemple, un paragraphe avec id="intro" sera bleu.

Méthode anti-conflits

• écris des classes courtes et explicites
• garde une architecture par composants
• évite de styler via id
• traite les surcharges de styles au niveau composant, pas global

A retenir

La majorité des bugs CSS "mystérieux" viennent de la cascade et de la spécificité. Si tu maîtrises ces deux notions, tu corriges plus vite et tu écris un CSS plus stable.

Mini pratique

Crée trois règles qui ciblent le même bouton :

• une avec button
• une avec .btn
• une avec #cta

Observe laquelle gagne, puis retire l'id et retrouve un comportement prévisible avec des classes.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.