Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Cascade et spécificité : comprendre les priorités | SovranCode

Contenu du coursCascade, Specificity, and Inheritance · 16 leçons

CSS Foundations

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités

Layout Systems

CSS — Modèle de boîte CSS — Positionnement CSS — Flexbox CSS — Grid

Applied CSS Systems

CSS — Arrière-plans CSS — Pseudo-classes CSS — Débordements CSS — Transformations CSS — Architecture

Responsive and Responsible CSS

CSS — Media queries CSS — Typographie CSS — Accessibilité

CSS58 min

Cascade, Specificity, and Inheritance

Predict which declaration wins instead of fighting the cascade with increasingly strong selectors.

Plusieurs déclarations peuvent viser la même propriété d’un élément. La cascade les départage selon leur origine, leur importance, leur couche, la spécificité du sélecteur et leur ordre dans le code. L’héritage transmet ensuite certaines propriétés, comme la couleur du texte, du parent à l’enfant. Organiser les couches est généralement plus facile à maintenir que multiplier les !important.

Comprendre l’ordre des couches

Repérez les couches déclarées dans cet exemple et les règles qu’elles contiennent. Avant de modifier le code, cherchez quel critère permet de départager deux déclarations concurrentes.

@layer reset, base, components, utilities;

@layer base {
  a { color: #617713; }
}
@layer components {
  .button { color: #10231f; }
}
@layer utilities {
  .muted { color: #64716d; }
}

Les bons réflexes

Examinez le style calculé avant d’ajouter une règle de remplacement.
Gardez une spécificité aussi faible que possible pour le besoin réel.
Organisez les couches, des styles de base aux utilitaires plus ciblés.

L’erreur à éviter

Ajouter !important dès qu’une règle ne s’applique pas masque souvent un problème de priorité. Les modifications suivantes deviennent plus difficiles parce qu’il faut aussi composer avec ces déclarations prioritaires.

ATELIER CSS · ENVIRON 30 MIN

Prévoir la déclaration qui l’emporte

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

La spécificité n’est pas le premier critère

Avant de comparer les sélecteurs, vérifiez que les déclarations s’appliquent et comparez leur origine, leur importance et leur couche. Pour des déclarations d’auteur normales, sans !important, une couche déclarée plus tard l’emporte sur une couche antérieure, même si cette dernière utilise un sélecteur plus spécifique. Une déclaration normale hors couche a priorité sur les déclarations normales placées dans des couches. Lorsque ce contexte est identique, comparez les identifiants, puis les classes, attributs et pseudo-classes, puis les balises et pseudo-éléments. S’il reste une égalité, la déclaration la plus tardive l’emporte. Avant d’ajouter un identifiant pour renforcer une règle, examinez donc celle qui gagne déjà.

L’héritage ne concurrence pas une déclaration directe

Si un paragraphe possède sa propre déclaration color, celle-ci ne se compare pas par spécificité à une couleur simplement héritée du parent. La déclaration directe fournit sa valeur au paragraphe. color s’hérite normalement ; les marges, en général, non. Utilisez inherit lorsque vous voulez reprendre explicitement la valeur calculée du parent. Attention : avec !important, l’ordre de priorité des couches s’inverse. Généraliser !important crée donc un autre problème de classement, au lieu de clarifier l’organisation. Gardez des remplacements intentionnels et examinez les styles calculés lorsque le résultat vous étonne.

Prévoyez la couleur de l’encadré, puis inversez l’ordre de déclaration des couches. Ajoutez ensuite une couleur .notice hors couche et expliquez le nouveau résultat.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
@layer base, components;
@layer base {
  body { font: 1rem/1.7 system-ui; padding: 2rem; }
  main .notice { color: #b00020; }
}
@layer components {
  .notice { color: #164b96; border: 2px solid currentColor; padding: 1rem; }
}
</style>
</head>
<body>
<main><p class="notice">Quelle couche détermine la couleur de ce texte ?</p><p>Comparez avec ce paragraphe sans classe.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
@layer base, components;
@layer base {
  body { font: 1rem/1.7 system-ui; padding: 2rem; }
  main .notice { color: #b00020; }
}
@layer components {
  .notice { color: #164b96; border: 2px solid currentColor; padding: 1rem; }
}
</style>
</head>
<body>
<main><p class="notice">Quelle couche détermine la couleur de ce texte ?</p><p>Comparez avec ce paragraphe sans classe.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

@layer components { .notice { color: blue; } }
.notice { color: red; }

Voir la correction et son explication

@layer base, components;
@layer base { .notice { color: red; } }
@layer components { .notice { color: blue; } }

Dans la version initiale, la déclaration normale hors couche a priorité sur celle de la couche components. Placez la valeur de base dans une couche antérieure si vous voulez que le composant détermine la couleur normale.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez un encadré avec des couches de base et de composant. Préparez trois conflits, notez la couleur attendue, puis vérifiez chaque cas dans les outils de développement.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Prévoir la déclaration qui l’emporte — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Prévoir la déclaration qui l’emporte</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Prévoir la déclaration qui l’emporte — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Prévoir la déclaration qui l’emporte</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

Vos prévisions tiennent compte de l’ordre des couches avant la spécificité.Vous distinguez une couleur héritée du parent d’une déclaration appliquée directement à l’enfant.La feuille de style finale ne contient pas de !important inutile.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Pour des déclarations d’auteur normales, laquelle a priorité sur une déclaration placée dans une couche ?N’importe quelle valeur héritéeUne déclaration hors coucheLe sélecteur le plus court

2. Deux déclarations normales sont à égalité sur les critères précédents, dans la même couche et avec la même spécificité. Qu’est-ce qui les départage ?La déclaration qui arrive le plus tard dans le codeLe nom de propriété qui vient en premier dans l’alphabetLa valeur la plus courte

Chargement du travail enregistré…

Vos choix de confidentialité

CSS Foundations

Layout Systems

Applied CSS Systems

Responsive and Responsible CSS

Cascade, Specificity, and Inheritance

Comprendre l’ordre des couches

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Prévoir la déclaration qui l’emporte

La spécificité n’est pas le premier critère

L’héritage ne concurrence pas une déclaration directe

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris