Imbrication CSS native

L'imbrication CSS native (référence de compatibilité 2024, tous les navigateurs modernes) permet d'écrire des règles CSS à l'intérieur d'autres règles, en reprenant la syntaxe d'imbrication auparavant disponible uniquement dans les préprocesseurs Sass et Less. Les règles imbriquées héritent automatiquement du contexte du sélecteur parent.

Écrivez les sélecteurs enfants à l'intérieur du bloc de règle parent. Le navigateur combine automatiquement les sélecteurs parent et enfant. Le sélecteur & (sélecteur d'imbrication) fait explicitement référence au sélecteur parent pour les modificateurs et les pseudo-classes.

& représente explicitement le sélecteur parent dans les règles imbriquées. Utilisez-le pour les pseudo-classes (&:hover), les pseudo-éléments (&::before), les classes de modification (&.active) et les sélecteurs d'attributs (&[disabled]). Sans &, les règles imbriquées créent des sélecteurs descendants.

Imbriquez naturellement les règles des pseudo-éléments à l'intérieur du parent : .button { &::before { content: ""; } &::after { content: ""; } }. Tous les styles du bouton sont ainsi regroupés, ce qui évite de répéter le sélecteur comme il faudrait le faire avec du CSS à plat.

Les requêtes média et les autres règles @ peuvent être imbriquées dans des règles (Chrome 112+, Firefox 117+) : .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Les styles adaptatifs restent associés à l'élément qu'ils modifient au lieu de se trouver dans un bloc de requête média distinct à la fin du fichier.

L'imbrication ne modifie pas les règles de spécificité : le sélecteur combiné possède la même spécificité que s'il était écrit à plat. .card .title, qu'il soit écrit avec ou sans imbrication, a la même spécificité (0,2,0). L'imbrication est une commodité syntaxique, pas une modification de la spécificité.

Un sélecteur imbriqué sans & crée un sélecteur descendant : .card { .title {} } devient .card .title. Avec & : .card { &.active {} } devient .card.active (sans espace : il s'agit d'une classe de modification, pas d'un descendant).

L'imbrication native ne convient pas parfaitement à BEM : les sélecteurs .block__element et .block--modifier sont des chaînes de caractères, et l'imbrication ne peut pas les construire avec & בלבד. Utilisez l'imbrication pour les pseudo-classes et les structures de composants imbriquées plutôt que pour la concaténation de chaînes BEM, qui nécessite toujours un préprocesseur.

La plupart des syntaxes d'imbrication de Sass sont identiques à celle de l'imbrication CSS native. Exceptions : Sass autorise la concaténation de chaînes avec &-modifier, contrairement au CSS natif. Pour migrer, recherchez les motifs &- ou &__ et aplatissez ces règles particulières tout en conservant les autres imbrications.

L'imbrication CSS native est prise en charge par Chrome 112+, Firefox 117+ et Safari 16.5+. Pour prendre en charge les anciens navigateurs, utilisez PostCSS avec postcss-nesting afin de transformer la syntaxe d'imbrication native en CSS à plat lors de la compilation, ce qui permet dès aujourd'hui d'écrire du CSS avec l'imbrication native.

Chrome DevTools affiche les règles imbriquées dans le panneau Styles sous leur forme imbriquée. Cliquer sur une règle imbriquée vous amène à l'emplacement source correspondant dans le panneau Sources. Le débogage d'un CSS imbriqué est aussi clair que celui d'un CSS à plat dans les DevTools modernes.

Quelle différence y a-t-il entre l'imbrication avec et sans le sélecteur  ?

L'imbrication CSS native permet d'utiliser une syntaxe imbriquée semblable à celle de Sass dans du CSS classique. Le sélecteur & crée des sélecteurs composés pour les pseudo-classes, les pseudo-éléments et les modificateurs. Les requêtes @media imbriquées regroupent les styles adaptatifs avec les éléments concernés. PostCSS transforme l'imbrication native pour les anciens navigateurs, ce qui permet de l'adopter progressivement dès aujourd'hui.