Le CSS Nesting Module est une spécification CSS du W3C, disponible sur les principaux navigateurs depuis août 2023, qui permet l'imbrication des règles de style pour faciliter la lecture et l'écriture du CSS. Dans cet article, nous allons explorer ce qu'est le CSS Nesting et pourquoi c'est une révolution pour le développement frontend.
Le CSS Nesting Module c'est la possibilité d'imbriquer des sélecteurs CSS les uns dans les autres.
Image par Hannah Alkadi de Pixabay
Qu'est-ce que le CSS Nesting Module ?
Cette spécification du W3C vise à faciliter la lecture et l'écriture du CSS en permettant aux développeurs frontend de créer des sélecteurs CSS plus lisibles et maintenables en les imbriquant les uns dans les autres, plutôt que de les écrire comme une liste de sélecteurs séparés placés les uns en dessous des autres.
Concrètement, le CSS Nesting Module permet aux développeurs de définir des règles de style en cascade, en les imbriquant les unes dans les autres, pour créer des feuilles de style CSS plus facile à comprendre et éviter la duplication de code.
Prenons un exemple afin de mieux comprendre. Imaginons que nous souhaitons appliquer une taille de texte spécifique à tous les éléments de la classe .card. Voici comme actuellement nous écririons le code CSS :
.card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
max-width: 300px
}
.card h2 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.card p {
font-family: Arial;
font-size: 1.1rem;
line-height: 1.5;
}Mais grâce au CSS Nesting Module nous l'écririons de cette manière :
.card {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
max-width: 300px;
h2 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
p {
font-family: Arial;
font-size: 1.1rem;
line-height: 1.5;
}
}Dans cet exemple, les sélecteurs h2 et p sont imbriqués dans le sélecteur .card. Cette façon d'organiser le code CSS le rend plus lisible (puisqu'il reprendre la structure HTML) et simplifie également la maintenance des feuilles de style en réduisant les appels d'un même sélecteur.
Dans le second exemple ci-dessous, plutôt que d'appeler plusieurs fois le sélecteur .btn devant les speudo-class :hover et :focus, le CSS Nesting autorise l'usage de l'esperluette (ou & commercial) à la place. Ainsi si nous venons à changer le nom de la classe pas besoin de se soucier de la cohésion avec les pseudo-class associées.
.btn {
display: inline-block;
padding: 1rem 2rem;
border: none;
border-radius: 4px;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
background-color: #007bff;
&:hover {
background-color: #0069d9;
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
}
0 commentaire