Dolpheus89/NestingCss.md

## NestingCss.md

      
    Raw
  

              NestingCss.md
            
          
    Introduction

Cette quête a pour but de te faire aller plus loin dans l'écriture de tes feuilles de style, en te faisant découvrir l'imbrication du CSS.
🤓 À la fin de cette quête, tu seras capable de :


✅ Utiliser le CSS imbriqué pour structurer tes feuilles de style de manière organisée.
✅ Réduire la répétition de sélecteurs
✅ Appliquer des styles spécifiques à des éléments et leurs sous-éléments.

👉 Pré-requis


Avoir fini tes quêtes CSS.
Être à l'aise avec la syntaxe du CSS.

Mais c'est quoi le CSS imbriqué ? 🧱

L'imbrication CSS (ou nesting) est la possibilité de définir les règles de style d’un élément à l’intérieur d’un autre. Au lieu de répéter plusieurs fois le même sélecteur pour styliser des éléments enfants spécifiques ou des pseudo-sélecteurs, il suffit de les imbriquer sous un seul sélecteur.
L’imbrication permet de regrouper les styles associés et d’écrire le CSS sous une hiérarchie imbriquée, rendant le code plus organisé et lisible.
Le CSS imbriqué est disponible nativement depuis 2023, avec l'introduction de cette fonctionnalité dans les spécifications CSS officielles. Cette évolution marque une étape importante pour le développement du CSS moderne, car, jusqu'ici, l’imbrication de styles était uniquement possible avec des préprocesseurs comme Sass ou Less.

Exemple

Nous allons prendre ce code HTML en référence pour notre exemple :
<body>
    <header>
        <h1>Css Nesting</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corrupti nihil, officiis aut vel.
            <a href="#">This is a Link</a>
        </p>
    </header>
</body>
Comme tu le sais, le HTML est un langage composé de balises, où chaque balise peut en contenir d'autres à l'intérieur, un peu comme des poupées russes. Le CSS imbriqué fonctionne exactement comme ton HTML !
 Ici, nous utilisons une balise HTML (header) directement comme sélecteur dans le CSS à titre d'exemple. Cependant, dans la pratique, il est préférable d'utiliser des classes ou des ID pour garder un code plus flexible et éviter des conflits avec des éléments HTML identiques ailleurs sur la page.

Historiquement, le CSS s'écrit comme ceci :

header {
  width: 80%;
  color: #22232e;
}
header:hover {
  color: #636363;
}
header h1 {
  font-size: 3.5rem;
}
header p {
  font-size: 2rem;
  margin: 25px 0px 25px;
}
header p a {
  color: #00c2cb;
}
header p a:hover {
  color: #008a92;
}
Voici comment nous pourrions l'écrire avec du CSS imbriqué :

header {
  width: 80%;
  color: #22232e;

  &:hover {
    color: #636363;
  }

  h1 {
    font-size: 3.5rem;
  }

  p {
    font-size: 2rem;
    margin: 25px 0px 25px;

    a {
      color: #00c2cb;

      &:hover {
        color: #008a92;
      }
    }
  }
}
Pas mal, non ?
C’est ça la magie du CSS imbriqué : tous les styles que tu mets à l'intérieur d'un sélecteur (comme une balise, une classe ou un ID, dans notre exemple le header) resteront limités à cet élément et à ses sous-éléments.

Cela permet de garder les styles bien organisés et de ne pas les répéter inutilement.
Tu remarqueras la petite subtilité pour l'appel d'un pseudo-élément ou pseudo-classe (ici :hover), il faut mettre un & devant.

Ce caractère & fait référence à l'élément parent le plus proche dans lequel il est imbriqué. Ainsi, le premier :hover s'appliquera uniquement sur la balise header et le second uniquement sur la balise a.
Attention à ne pas vouloir trop imbriquer, cela ne doit pas représenter un seul gros bloc ce qui rendrait finalement ton code illisible. Découpe ton code en "composants". 
Les composants sont des sections spécifiques de ton HTML représentant une partie de l'interface, comme un bouton, un formulaire ou une carte de produit (ici le header).

Voici le CodeSandbox, amuse-toi à tester l'imbrication :
https://codesandbox.io/p/sandbox/objective-hypatia-t772xs?file=%2Findex.html%3A21%2C1

Avantages de l'imbrication du CSS


Organisation et lisibilité : Les styles sont regroupés sous des sélecteurs parents, ce qui rend le code plus clair et facile à suivre.
Réduction de la répétition : Moins de répétitions de classes et sélecteurs, ce qui allège le code.
Isolation des styles : Chaque composant est isolé dans son bloc, ce qui minimise les risques de conflits de style entre les membres d’une équipe.
Simplification de la maintenance : Avec des styles bien hiérarchisés, il est plus simple d’apporter des modifications sans impacter d'autres éléments.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
# La doc Mdn sur le nesting
💪 Challenge

https://codesandbox.io/p/sandbox/challenge-css-nesting-gcp8g9

Fork ce sandbox et ajoute un peu de style à cette NavBar grâce à la magie du CSS imbriqué et avec un hover sur les balises <li>.
Donne ton résultat avec un lien CodeSandbox.
Critères de validation


Le CSS imbriqué est utilisé pour l'ensemble du composant <nav>.
Le hover est présent et fonctionnel.
No results found