Pendant longtemps, écrire des sélecteurs imbriqués en CSS obligeait à passer par un préprocesseur comme Sass ou Less, puis à compiler ce code avant de le servir au navigateur. L'imbrication CSS native change cette donne : elle permet d'écrire directement, dans un fichier .css ordinaire, des règles imbriquées les unes dans les autres.
Cette fonctionnalité a mis du temps à arriver dans les spécifications, mais elle est aujourd'hui prise en charge par tous les navigateurs modernes, ce qui change la manière d'organiser une feuille de style sans dépendre d'une étape de build.
Définition
L'imbrication CSS native permet d'écrire un Sélecteur CSS à l'intérieur d'un autre, en utilisant le symbole & pour représenter le sélecteur parent, exactement comme le fait Sass depuis des années. Une règle imbriquée est ainsi résolue par le navigateur lui même, sans aucune étape de compilation, et le code source reste identique à ce qui est réellement interprété.
Concrètement, au lieu de répéter un sélecteur de bloc pour chacun de ses états ou de ses enfants, vous ouvrez une accolade à l'intérieur de la règle parente et vous y placez les règles associées. Le résultat est un fichier plus court, plus proche de la structure du composant qu'il stylise, et plus simple à parcourir visuellement.
La syntaxe avec l'esperluette
Le symbole & représente le sélecteur du bloc englobant à l'endroit exact où il est placé. Cela permet de cibler un état comme :hover, un élément enfant direct, ou une classe modificatrice, sans jamais réécrire le sélecteur parent en entier. Sans l'esperluette, un sélecteur imbriqué qui commence par un élément est automatiquement traité comme un descendant, ce qui correspond au comportement le plus courant recherché.
.card {
padding: 1.5rem;
border-radius: 0.75rem;
background: white;
& h2 {
margin-bottom: 0.5rem;
}
&:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
&.card--featured {
border: 2px solid currentColor;
}
}Ce que ça remplace de Sass
Pendant plus de dix ans, Sass a été la principale raison d'ajouter un préprocesseur à un projet CSS, précisément pour bénéficier de l'imbrication, des variables et des fonctions comme mix(). L'imbrication native ne remplace pas Sass sur tous ces points, mais elle couvre à elle seule l'usage le plus répandu : regrouper les styles d'un composant, de ses états et de ses enfants directs dans un seul bloc lisible.
Les variables, elles, ont leur propre équivalent natif avec les propriétés personnalisées, et les fonctions comme calc() couvrent une bonne partie des calculs autrefois réservés à Sass. Pour beaucoup de projets récents, la combinaison de ces trois fonctionnalités natives suffit à se passer complètement d'une étape de compilation, ce qui simplifie la chaîne d'outils et accélère le développement au quotidien.
Support navigateur et compatibilité
L'imbrication CSS native est prise en charge par l'ensemble des navigateurs modernes depuis 2023 et 2024 selon les moteurs, ce qui la rend utilisable en production pour la grande majorité des audiences en 2026. Comme pour toute fonctionnalité récente, il reste prudent de vérifier le taux de couverture réel de votre audience avant de retirer un préprocesseur existant d'un projet déjà en place.
Pour un projet démarré aujourd'hui sans contrainte de navigateurs anciens, rien n'empêche de s'appuyer uniquement sur l'imbrication native dès le départ. Pour un projet existant construit avec Sass, la migration peut se faire progressivement, fichier par fichier, sans tout réécrire d'un coup.
Effet sur la cascade et la spécificité
L'imbrication ne change rien aux règles fondamentales de la Cascade ni au calcul de la Spécificité. Un sélecteur imbriqué produit exactement le même sélecteur final, à plat, qu'un préprocesseur aurait généré, avec la même spécificité que si vous l'aviez écrit vous même sans imbrication. Il n'y a donc aucune surprise à attendre de ce côté là, ce qui facilite grandement l'adoption dans un projet existant.
Imbrication native et méthodologies de nommage
L'imbrication native change aussi la manière dont certains projets appliquent une méthodologie de nommage comme BEM. Historiquement, un nom de classe long comme card__title--large servait justement à éviter l'imbrication et ses pièges de spécificité en CSS pur. Avec l'imbrication native bien maîtrisée, certaines équipes allègent leurs conventions de nommage, tout en gardant la même lisibilité du résultat final dans le navigateur.
Foire aux questions
Pas totalement. Elle couvre l'imbrication des sélecteurs, l'usage le plus courant de Sass, mais des fonctions avancées comme les boucles ou les mixins restent propres au préprocesseur et n'ont pas d'équivalent natif direct.
Non, elle n'est nécessaire que pour cibler un état, un pseudo-élément ou composer un sélecteur qui ne serait pas un simple descendant. Un sélecteur d'élément imbriqué sans esperluette est traité comme un descendant du bloc parent par défaut.
Elle est prise en charge par les versions récentes de tous les navigateurs majeurs depuis 2023 et 2024. Pour un public plus ancien ou très hétérogène, vérifiez la couverture réelle de votre audience avant de retirer un préprocesseur en place.