Le nesting avec CSS Vanilla

Le monde du développement web est en constante évolution. Aujourd'hui, nous allons parler d'une nouvelle fonctionnalité très attendue du CSS : le nesting. Cette fonction permet d'imbriquer des sélecteurs CSS les uns dans les autres pour simplifier et structurer le code.

Les développeurs devaient utiliser des préprocesseurs comme Sass ou Less pour utiliser le nesting avant l'arrivée de cette fonctionnalité. Le support natif du nesting dans le CSS permet de l'utiliser sans dépendre de ces outils.

Le nesting avec SASS/SCSS : https://writecode.fr/tutoriel/sass-limbrication

Le nesting aide à organiser le code CSS de manière plus logique et hiérarchique. Par exemple, supposons que vous ayez une structure HTML telle que :

<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Auparavant, pour styliser cette structure, vous auriez dû écrire un code CSS comme suit :

nav {
  background-color: #333;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline;
}

nav ul li a {
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

Avec le nesting en CSS, vous pouvez maintenant écrire le même code de manière plus concise et claire :

nav {
  background-color: #333;

  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

    li {
      display: inline;

      a {
        color: white;
        padding: 8px 16px;
        text-decoration: none;
      }
    }
  }
}

Pour utiliser le ⁣nesting, il suffit d'imbriquer un sélecteur à l'intérieur d'un autre sélecteur, en respectant l'indentation. Les sélecteurs imbriqués héritent automatiquement du contexte de leur parent.

Il est important de noter que le ⁣nesting doit être utilisé avec prudence pour éviter une imbrication trop profonde, qui pourrait rendre le code difficile à maintenir et à lire. De plus, la fonction de nesting n'est pas encore prise en charge par tous les navigateurs. Il est donc recommandé de vérifier la compatibilité avant de l'utiliser dans vos projets.

Il est important de noter qu'il doit être utilisé avec prudence pour éviter une imbrication trop profonde

Disponible désormais avec le CSS Vanilla, elle rend inutile le recours à des préprocesseurs pour cette fonction. Avant de l'utiliser dans vos projets, vous devez le tester.