Cascade, spécificité et layers : comprendre les règles qui pilotent votre CSS

Vous ajoutez une classe .promo en rouge sur un lien. Vous rechargez. Rien ne bouge. Le lien reste bleu. Vous relisez trois fois votre feuille de style, tout semble correct, et pourtant le navigateur ignore votre déclaration. Ce n'est pas un bug. C'est une règle. Et tant que vous ne connaissez pas cette règle, vous continuerez à empiler des sélecteurs de plus en plus longs, puis des !important, jusqu'à obtenir une feuille de style que plus personne n'ose toucher.

Ce cours de 1h45 vous rend le contrôle. Vous allez comprendre exactement comment le navigateur décide quelle propriété l'emporte, et comment écrire un CSS où cette décision devient prévisible.

Ce que vous allez comprendre, démonstration à l'appui

• La cascade : pourquoi la dernière déclaration gagne parfois, et pourquoi très souvent elle ne gagne pas du tout
• L'héritage : quelles propriétés se transmettent aux enfants (color, font-family, line-height) et lesquelles restent bloquées sur l'élément (margin, padding, border)
• La spécificité : le système de points appliqué par le navigateur, élément à 1, classe, attribut et pseudo-classe à 10, identifiant à 100, et surtout comment ces points s'additionnent sur un sélecteur composé
• La valeur !important : pourquoi elle fonctionne, pourquoi elle reste malgré tout un symptôme, et le cas précis où elle devient légitime
• La pseudo-classe :where() : le sélecteur dont la spécificité vaut zéro, et ce que cela change concrètement quand vous voulez surcharger un style plus tard
• La règle @layer : déclarer vos propres couches reset, base, components et utilities, et fixer vous-même l'ordre de priorité, indépendamment du poids des sélecteurs et de leur position dans le fichier

Un cas pratique complet, du HTML au CSS en couches

La seconde moitié du cours est une mise en application intégrale : une carte produit e-commerce construite de zéro.
Vous posez d'abord le HTML, puis vous le nommez avec une convention de composant (préfixe du bloc, double underscore pour les éléments, double tiret pour les variantes), avant d'y ajouter les attributs d'accessibilité : aria-labelledby reliant l'article à son titre, role="group" et aria-label sur la zone des boutons.
Vient ensuite le CSS, entièrement organisé en couches. Le layer reset neutralise les marges et harmonise les polices des éléments de formulaire, le tout emballé dans :where() pour rester à poids zéro. Le layer base gère le body. Le layer components accueille le conteneur, la carte produit et les boutons avec leur variante, leur état hover, leur état actif, leurs transitions et un focus visible soigné. Le layer utilities reste volontairement vide, et Carl Brison explique précisément pourquoi il le déclare quand même.
Une fiche récapitulative et les fichiers de l'exercice sont fournis.

À qui s'adresse ce cours

Aux développeurs front-end, intégrateurs et webdesigners techniques qui écrivent déjà du CSS au quotidien et qui butent sur sa maintenabilité. Vous devez connaître les sélecteurs de base et savoir styliser une page. Vous n'avez besoin d'aucune connaissance préalable de @layer ni de :where().
Ce cours n'apprend pas le CSS. Il apprend comment le CSS décide.

Votre formateur

Carl Brison est technicien supérieur en multimédia depuis le début des années 2000 et créateur de nombreux sites professionnels, dont deux imprimeries en ligne. Auteur d'ouvrages informatiques publiés aux Éditions Ellipses, il est formateur certifié sur Tuto.com et intervient comme mentor sur la formation Développeur Web Front-End éligible au CPF. Sa méthode ici : chaque règle est prouvée en direct dans le navigateur, en déplaçant les déclarations et en montrant ce qui change à l'écran.

Ce cours et la suite du parcours

C'est le premier volet de la série CSS moderne. Le suivant approfondit la convention de nommage effleurée dans l'exercice et pousse la logique de composant plus loin.
Pour compléter vos fondations, le bundle HTML sémantique, accessibilité et SEO technique pose le socle en amont, et les fondamentaux des attributs ARIA détaillent l'accessibilité abordée ici en surface. Côté mise en page, le bundle CSS Grid moderne 2026 et le projet layout ultra-moderne de A à Z prolongent directement le travail sur les composants.
Vous voulez tester l'approche du formateur avant d'acheter ? Deux tutos gratuits du même auteur : le nesting CSS natif et la pseudo-classe nth-child en 5 minutes. L'ensemble du catalogue est sur la page tuto CSS.