Pourquoi le CSS Nesting Module est une révolution pour le frontend ?

4.2 (10)

Le CSS Nesting Module est une spécification CSS du W3C en cours de développement 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.

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);
  }
}

Pourquoi utiliser l’imbrication CSS ?

Pour l’heure, le CSS Nesting Module est en cours de développement, il n’est donc pas encore terminé. Néanmoins voici les principales raisons pour lesquelles vous devriez envisager de l’utiliser dans votre code CSS une fois ça spécification achevée :

1. Organisation du code : Le CSS Nesting Module permet de structurer et d’organiser votre code CSS de manière plus claire et plus lisible. En utilisant des règles imbriquées, vous pouvez regrouper les styles liés à une même section de votre page et les maintenir ensemble. Cela facilite la lecture et la compréhension de votre code, ce qui est particulièrement utile pour les projets de grande envergure.
2. Réduction de la duplication de code : En utilisant des règles imbriquées, vous pouvez éviter la duplication de code et créer des styles réutilisables pour différentes parties de votre page. Cela peut réduire considérablement la quantité de code, ce qui rend votre feuille de style plus facile à maintenir et plus efficace.
3. Simplification de la maintenance : Si vous devez apporter des modifications à un style particulier, vous pouvez le faire à un seul endroit plutôt que de rechercher plusieurs occurrences de ce style dans votre feuille de style.

En résumé, le CSS Nesting Module est une technique puissante pour améliorer la qualité de votre code CSS, en simplifiant sa structure, en réduisant la duplication de code et en améliorant sa lisibilité. Cela peut vous aider à créer des feuilles de style plus efficaces et plus faciles à maintenir, ce qui peut vous faire gagner du temps et améliorer la qualité de votre travail.

Les limitations du CSS Nesting Module

Le CSS Nesting Module présente certaines limitations qu’il est important de connaître avant de l’utiliser. Ainsi, pour le moment, peu de navigateurs sont compatibles.

Seuls Chrome et Edge intègrent partiellement certaines fonctionnalités du CSS Nesting Module au moment de la rédaction de cette l’article. Il n’est, par conséquent, pas encore conseillé d’utiliser ce module dans des projets. En revanche rien n’empêche de le tester et de s’entrainer à sa syntaxe particulière pour s’y préparer et s’y habituer.

Comme pour les langages SASS et LESS qui autorisent eux aussi l’imbrication CSS mais oblige à passer par une étape de compilation, si vous utilisez le CSS Nesting Module de manière excessive, cela peut rendre votre code difficile à comprendre et à maintenir.

Il faut par exemple éviter d’avoir une trop grande profondeur d’imbrication. Trois à quatre niveaux maximum sont conseillés. Ceci implique de travailler par petit module de code plutôt que de chercher à imbriquer toute la structure depuis la balise <body> jusqu’à la balise <footer> par exemple.

L’imbrication CSS réclame de la précision

De plus, si vous ne faites pas attention à la façon dont vous organisez vos sélecteurs, vous risquez de créer des spécificités qui affecteront involontairement d’autres éléments de votre page.

Ainsi, l’imbrication rend la hiérarchie des sélecteurs plus explicite, ce qui peut parfois rendre plus difficile la surcharge des règles CSS. En cas de surcharge d’une règle définie à l’intérieur d’une règle parente, vous devrez peut-être ajouter un sélecteur plus spécifique. Bref il faut faire attention.

Les développeurs habitués à écrire des sélecteurs de manière linéaire seront sans doute dérouté au début par l’imbrication. Un temps d’adaptation est donc nécessaire.

En somme, le CSS Nesting Module est un outil utile pour améliorer l’organisation et la lisibilité de votre code CSS. Cependant, comme pour tout outil, il présente certaines limitations qui doivent être prises en compte lors de son utilisation et un peu de temps pour la prise en main.

Pour conclure

Bien que le CSS Nesting Module soit une spécification loin d’être terminée, elle promet de simplifier, d’organiser et de maintenir plus facilement notre code CSS. Cependant, il est important de noter que ce n’est pas un remède miracle pour tous les problèmes de CSS que l’on pourrait rencontrer. Comme nous venons de le voir, il présente certaines limitations. Il est donc important de l’utiliser de manière judicieuse et de comprendre ses limites.

Toutefois, si vous êtes un développeur frontend, vous devriez suivre de près l’évolution du CSS Nesting Module. Il est indéniable que l’intégration native de l’imbrication de sélecteurs va révolutionner l’écriture des feuilles de style CSS. Alors, autant s’y préparer !

Pour ne savoir plus sur le l’imbrication CSS du module du W3C.

Pour suivre son intégration dans les navigateurs.

Retour vers la page d’accueil du blog