Imbrication CSS

Qu'est-ce que l'imbrication CSS (CSS Nesting) ?

L'imbrication CSS permet d'écrire des règles imbriquées, un peu comme les balises HTML (concept parent-enfant). Elle simplifie la gestion des styles pour des éléments qui partagent une structure hiérarchique, en rendant le code plus lisible et plus maintenable.

Exemple de base sans imbrication CSS :

nav { background-color: #f8f8f8; } nav ul { list-style: none; padding: 0; } nav ul li { display: inline-block; margin: 0 10px; }

Avec l'imbrication CSS> :

nav { background-color: #f8f8f8; ul { list-style: none; padding: 0; li { display: inline-block; margin: 0 10px; } } } Syntaxe de l'imbrication CSS
  1. Les sélecteurs imbriqués doivent être contenus dans une règle parent.
  2. Utilisez & pour faire référence au parent dans des sélecteurs complexes (comme des pseudo-classes ou des combinaisons).

Exemple avec & :

button { background: blue; color: white; &:hover { background: darkblue; } &.primary { border: 2px solid white; } }

Résultat compilé :

button { background: blue; color: white; } button:hover { background: darkblue; } button.primary { border: 2px solid white; } Avantages de l'imbrication CSS
  1. Lisibilité accrue : Le style reflète la structure HTML sous-jacente.
  2. Code plus concis : Réduit la répétition des sélecteurs parents.
  3. Facilité de maintenance : Les styles hiérarchiques sont groupés.
Limitations et précautions
  1. Profondeur d'imbrication : Évitez de trop imbriquer vos styles (recommandation : pas plus de 3 niveaux). Une structure complexe peut être difficile à lire et entraîner des problèmes de performance.
  2. Complexité accrue : Des règles trop imbriquées peuvent devenir difficiles à comprendre si elles ne sont pas bien documentées.
  3. Performance : Bien que l'imbrication elle-même soit performante, l'utilisation abusive de sélecteurs complexes peut ralentir le rendu.
Support des navigateurs (début 2025)

L'imbrication CSS est une spécification relativement récente et fait partie des modules CSS travaillant avec le CSS Nesting Module Level 1.

Actuellement :

  • Support natif : Il est pris en charge par plusieurs navigateurs modernes comme Chrome 112+, Edge 112+, et Safari 16.4+.
  • Non supporté : Il peut ne pas fonctionner correctement sur des versions plus anciennes ou des navigateurs comme Internet Explorer (obsolète) ou d'autres moteurs non à jour.

Solution pour la compatibilité :

Si vous voulez utiliser l'imbrication CSS en production :

  1. Utilisez un outil comme PostCSS avec un plugin pour la transpiler en CSS classique.
  2. Vérifiez le support avec des outils comme Can I Use : CSS Nesting Support.
Exemple pratique

HTML :

<div class="card"> <h2>Article</h2> <p>Contenu de l'article</p> <a href="#">Lire la suite</a> </div>

CSS avec imbrication :

.card { background-color: #fff; border: 1px solid #ddd; padding: 20px; h2 { color: #333; margin-bottom: 10px; } p { color: #666; } a { color: blue; &:hover { color: darkblue; text-decoration: underline; } } }

Résultat sans imbrication (transpilé ou manuel) :

.card { background-color: #fff; border: 1px solid #ddd; padding: 20px; } .card h2 { color: #333; margin-bottom: 10px; } .card p { color: #666; } .card a { color: blue; } .card a:hover { color: darkblue; text-decoration: underline; } Conclusion : Faut-il l'utiliser ?

  • Oui, si :

    • Vous travaillez sur un projet moderne où tous les navigateurs cibles le prennent en charge.
    • Vous utilisez des outils qui gèrent la transpilation pour la rétrocompatibilité.

  • Non, si :

    • Vous ciblez des environnements obsolètes ou ne pouvez pas garantir le support.
    • Vous débutez avec CSS et n'êtes pas encore familier avec les bases comme la spécificité.

En date d'aujourd'hui, est-ce qu'il est risqué que l'imbrication CSS ne soit pas supporté par certains navigateurs et appareils?

Can I use "CSS nesting" ?