Imbrication CSS (intro)

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; } } } Autre 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; } 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.

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" ?