Aller au contenu principal

Module CSS.2 – Cascade & spécificité

Objectif​

Comprendre la cascade CSS, l'héritage, la spécificité et quand utiliser !important pour contrôler précisément l'application des styles.

Théorie​

La cascade CSS​

Cascade = Ordre dans lequel les styles sont appliqués quand plusieurs règles s'appliquent au même élément.

Ordre d'application :

  1. Source : Auteur > Utilisateur > Navigateur
  2. Spécificité : Plus spécifique gagne
  3. Ordre : Dernière règle dans le code gagne (à spécificité égale)

Exemple :

/* Règle 1 */
p {
    color: blue;
}

/* Règle 2 (appliquée car plus tard dans le code) */
p {
    color: red;
}
/* Résultat : texte rouge */

Spécificité​

Spécificité = Poids d'un sélecteur. Plus le sélecteur est spécifique, plus il a de poids.

Calcul de spécificité (a, b, c, d) :

  • a : Styles inline (1000 points)
  • b : IDs (100 points chacun)
  • c : Classes, attributs, pseudo-classes (10 points chacun)
  • d : Éléments, pseudo-éléments (1 point chacun)

Exemples :

/* Spécificité : 0,0,0,1 (1 point) */
p { color: blue; }

/* Spécificité : 0,0,1,0 (10 points) */
.texte { color: red; }

/* Spécificité : 0,0,1,1 (11 points) */
p.texte { color: green; }

/* Spécificité : 0,1,0,0 (100 points) */
#header { color: purple; }

/* Spécificité : 0,1,1,1 (111 points) */
#header p.texte { color: orange; }

Résultat : Le sélecteur avec la spécificité la plus élevée gagne.

Ordre d'importance​

Quand la spécificité est égale, l'ordre compte :

/* Appliqué en premier */
p {
    color: blue;
}

/* Appliqué en dernier (gagne) */
p {
    color: red;
}
/* Résultat : texte rouge */

Héritage​

Héritage = Les éléments enfants héritent des propriétés de leurs parents.

Propriétés héritées :

  • color
  • font-family
  • font-size
  • line-height
  • text-align
  • etc.

Propriétés non héritées :

  • margin
  • padding
  • border
  • width
  • height
  • background
  • etc.

Exemple d'héritage :

body {
    color: blue;
    font-family: Arial;
}
<body>
    <p>Texte bleu en Arial (hérité)</p>
    <div>
        <p>Texte bleu en Arial (hérité aussi)</p>
    </div>
</body>

Forcer l'héritage :

.enfant {
    color: inherit; /* Hérite de la couleur du parent */
}

!important​

!important = Force une déclaration, ignore la cascade et la spécificité.

p {
    color: blue !important;
}

.texte {
    color: red; /* Ignoré à cause de !important */
}
/* Résultat : texte bleu */

⚠️ Dangers de !important :

  • ❌ Difficile à surcharger
  • ❌ Rend le CSS difficile à maintenir
  • ❌ Masque les problèmes de spécificité
  • ❌ Crée des conflits

Quand utiliser (rarement) :

  • Override de styles tiers (frameworks)
  • Styles critiques (accessibilité)
  • En dernier recours

Meilleure pratique : Éviter !important, corriger la spécificité à la place.

Règles de cascade complètes​

Ordre de priorité (du plus faible au plus fort) :

  1. Règles normales (spécificité normale)
  2. Règles avec !important (spécificité normale)
  3. Règles inline (spécificité normale)
  4. Règles inline avec !important (spécificité normale)

Exemple :

/* 1. Règle normale */
p { color: blue; }

/* 2. Règle avec !important (gagne sur 1) */
p { color: red !important; }

/* 3. Inline (gagne sur 1 et 2) */
<p style="color: green;">Texte</p>

/* 4. Inline avec !important (gagne sur tout) */
<p style="color: orange !important;">Texte</p>

Calculer la spécificité​

Méthode :

  1. Compter les IDs : (0, nombre d'IDs, 0, 0)
  2. Compter les classes/attributs/pseudo-classes : (0, 0, nombre, 0)
  3. Compter les éléments/pseudo-éléments : (0, 0, 0, nombre)

Exemples détaillés :

/* 0,0,0,1 = 1 point */
p { }

/* 0,0,1,0 = 10 points */
.texte { }

/* 0,0,1,1 = 11 points */
p.texte { }

/* 0,1,0,0 = 100 points */
#header { }

/* 0,1,1,1 = 111 points */
#header p.texte { }

/* 0,0,3,1 = 31 points */
.texte.important.urgent p { }

Bonnes pratiques​

1. Éviter la sur-spécificité​

❌ Mauvais :

body div.container section article p.texte {
    color: blue;
}

✅ Bon :

.texte {
    color: blue;
}

2. Utiliser des classes plutôt que des IDs​

❌ Mauvais :

#header { }
#content { }
#footer { }

✅ Bon :

.header { }
.content { }
.footer { }

Pourquoi : Classes = réutilisables, spécificité plus faible.

3. Éviter !important​

❌ Mauvais :

p {
    color: blue !important;
}

✅ Bon :

p.texte-important {
    color: blue;
}

4. Organiser le CSS par spécificité croissante​

/* Spécificité faible d'abord */
p { }

/* Puis plus spécifique */
.texte { }

/* Enfin très spécifique */
#header .texte { }

Exercices guidés​

Exercice 1 : Comprendre la cascade​

Créez plusieurs règles pour le même élément :

  • Règle 1 : p { color: blue; }
  • Règle 2 : p { color: red; }
  • Observez quelle règle est appliquée (dernière)

Exercice 2 : Calculer la spécificité​

Calculez la spécificité de ces sélecteurs :

  • p
  • .texte
  • #header
  • p.texte
  • #header p.texte
  • div.container section p

Exercice 3 : Héritage​

Créez un parent avec color: blue et observez :

  • Les enfants héritent-ils de la couleur ?
  • Testez avec margin (non hérité)

Exercice 4 : !important​

Testez !important :

  • Créez un conflit de spécificité
  • Utilisez !important pour forcer
  • Comprenez pourquoi c'est dangereux

Exercice 5 : Résolution de conflits​

Créez un conflit de styles et résolvez-le :

  • Sans utiliser !important
  • En ajustant la spécificité
  • En réorganisant le CSS

❌ Erreurs fréquentes​

Erreur 1 : Sur-spécificité​

❌ Mauvais :

body div.container section article p.texte {
    color: blue;
}

✅ Bon :

.texte {
    color: blue;
}

Pourquoi : Plus simple, plus maintenable.

Erreur 2 : Utiliser !important partout​

❌ Mauvais :

p { color: blue !important; }
.texte { font-size: 16px !important; }

✅ Bon :

p { color: blue; }
.texte { font-size: 16px; }

Pourquoi : !important rend le CSS difficile à maintenir.

Erreur 3 : Confondre héritage​

❌ Mauvais :

body {
    margin: 20px; /* margin n'est pas hérité */
}
/* Pense que tous les enfants auront margin */

✅ Bon :

body {
    margin: 20px;
}
/* Utiliser * ou reset si besoin */
* {
    margin: 0;
}

Pourquoi : Comprendre quelles propriétés sont héritées.

Erreur 4 : IDs pour le style​

❌ Mauvais :

#header { }
#content { }

✅ Bon :

.header { }
.content { }

Pourquoi : IDs = unique, difficile à réutiliser, spécificité élevée.

Erreur 5 : Ignorer l'ordre​

❌ Mauvais :

/* Règle spécifique en premier */
#header p { color: blue; }
/* Règle générale après (ne fonctionne pas) */
p { color: red; }

✅ Bon :

/* Règle générale d'abord */
p { color: red; }
/* Règle spécifique après */
#header p { color: blue; }

Pourquoi : Organisation logique (général → spécifique).

🚀 Mini-projet​

Mission : Maîtriser la cascade et la spécificité

Créez une page avec plusieurs niveaux de styles :

Styles à créer :

  1. Styles généraux (body, p, h1)
  2. Styles de classes (.texte-important, .centré)
  3. Styles spécifiques (.container .texte)
  4. Conflits de styles à résoudre
  5. Test d'héritage

Défis :

  • Créer des conflits et les résoudre sans !important
  • Calculer la spécificité de chaque sélecteur
  • Comprendre quel style est appliqué et pourquoi

Critères :

  • ✅ Compréhension de la cascade
  • ✅ Calcul correct de la spécificité
  • ✅ Résolution de conflits sans !important
  • ✅ Code organisé (général → spécifique)

Objectif : Maîtriser la cascade, la spécificité et l'héritage pour contrôler précisément vos styles.

Validation : Vous pouvez passer au module suivant quand vous comprenez la cascade, pouvez calculer la spécificité, et résolvez les conflits sans !important.