Imbrication CSS
Les variables ont nommé vos valeurs. calc et ses amis les ont calculées. Le nesting organise les sélecteurs qui utilisent ces valeurs : gardez le titre, le bouton et les styles hover d’une carte dans .card au lieu de répéter le nom du parent dans tout le fichier.
Imbriquer un sélecteur enfant
Écrivez une règle dans une autre. Un sélecteur de classe ou de type imbriqué se joint comme descendant du parent (combinateur espace), sauf si vous précisez autrement avec & :
.card {
padding: 1.25rem;
border-radius: 0.75rem;
background: var(--surface, #fff);
.title {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.body {
color: var(--muted, #444);
line-height: 1.5;
}
}
Le navigateur développe cela en .card .title et .card .body. Vous obtenez toujours des sélecteurs descendants ordinaires : le nesting est du sucre pour la structure et la localité, pas un nouveau modèle de correspondance.
Le sélecteur parent &
Utilisez & lorsque la règle imbriquée doit s’attacher au même élément que le parent — pseudo-classes, pseudo-éléments, ou une classe supplémentaire sur le parent :
.button {
display: inline-flex;
padding: 0.6rem 1.1rem;
border: 0;
border-radius: 0.5rem;
background: var(--brand, #2563eb);
color: #fff;
&:hover {
background: var(--brand-hover, #1d4ed8);
}
&:focus-visible {
outline: 2px solid var(--brand, #2563eb);
outline-offset: 2px;
}
&.is-primary {
background: var(--brand-strong, #1e40af);
}
}
&:hover signifie .button:hover. &.is-primary signifie .button.is-primary. Sans &, un :hover { } nu est un nesting invalide en CSS natif — le & rend l’attache explicite.
Combinateurs avec &
Placez le combinateur après & quand vous voulez un enfant, un frère ou un autre lien explicite — pas l’espace descendant simple :
.nav {
display: flex;
gap: 0.75rem;
& > .item {
padding: 0.35rem 0.6rem;
}
& > .item + .item {
border-inline-start: 1px solid #ddd;
}
/* same as nesting .item without & — descendant */
.badge {
font-size: 0.75rem;
}
}
& > .item → .nav > .item. Un .badge imbriqué sans & → .nav .badge. Choisissez exprès : les descendants profonds par accident sont une odeur classique du nesting.
Imbriquer @media avec le composant
Vous pouvez imbriquer des at-rules comme @media dans une règle de style pour que les breakpoints vivent à côté du composant qu’elles modifient :
.hero {
padding: 2rem 1.25rem;
h1 {
font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}
@media (min-width: 48rem) {
padding: 3rem 2rem;
h1 {
max-width: 20ch;
}
}
}
Une fois développé, le media query enveloppe toujours les déclarations de .hero (et .hero h1). Associez cela aux tokens et à clamp() des leçons Modern Toolkit précédentes — le nesting ne fait que déplacer les règles.
Motifs de nesting en un coup d’œil
📊 Aide-mémoire nesting natif
| Vous écrivez | Cela signifie | À utiliser quand |
|---|---|---|
.card { .title { } } |
.card .title |
Styler un descendant sous le composant |
.btn { &:hover { } } |
.btn:hover |
Pseudo-classe sur le même élément |
.btn { &.big { } } |
.btn.big |
Classe supplémentaire sur le même élément |
.nav { & > a { } } |
.nav > a |
Combinateur enfant explicite |
.box { @media (…) { } } |
Media query limité aux sélecteurs de cette règle | Garder les breakpoints avec le composant |
Gardez les nids peu profonds
Deux ou trois niveaux restent en général lisibles. Des arbres plus profonds ressuscitent le problème de la « pyramide de sélecteurs » des équipes Sass : diffs difficiles, specificity plus haute, styles qui n’ont de sens que dans un parent géant. Préférez une racine de composant claire (.card, .nav) et imbriquez états et enfants proches — pas toute la page.
Paquet composant : tokens + nest + états
Un extrait réaliste relie les trois dernières idées du toolkit sans répéter les leçons calc ou variables :
.panel {
--panel-pad: 1rem;
padding: var(--panel-pad);
border: 1px solid #e5e7eb;
border-radius: 0.75rem;
.heading {
margin: 0 0 0.5rem;
font-weight: 600;
}
.actions {
display: flex;
gap: calc(var(--panel-pad) / 2);
margin-block-start: var(--panel-pad);
}
&.is-compact {
--panel-pad: 0.5rem;
}
@media (max-width: 36rem) {
.actions {
flex-direction: column;
}
}
}
Les tokens restent des custom properties ; calc dérive toujours l’écart ; le nesting garde heading, actions, l’état compact et l’ajustement petit écran au même endroit.
Essayez vous-même
- Prenez des règles plates
.card {},.card .title {},.card .meta {}et réécrivez-les avec nesting sous.card. - Ajoutez
&:hoversur un.linkpour que seul le lien (pas un span imbriqué) change de couleur. - Imbriquez
@media (min-width: 40rem)dans.sidebarpour élargir le padding — vérifiez dans DevTools les sélecteurs développés. - Convertissez un
:hover { }imbriqué par erreur (sans&) en&:hover { }et notez qu’il devient valide. - Limitez un nid désordonné à trois niveaux à deux en promuant un bloc interne en classe propre.
Erreurs courantes
- Écrire
:hover { }imbriqué sans&— invalide ou pas ce que vous vouliez ; utilisez&:hover - S’attendre qu’un
.childnu signifie.parent.child— il faut&.child - Copier aveuglément les hacks Sass
&__elementBEM — le nesting natif suit la grammaire des sélecteurs CSS - Imbriquer cinq niveaux « parce qu’on peut » — lisibilité et specificity en souffrent
- Croire que le nesting remplace
var()oucalc()— il ne fait que grouper sélecteurs et at-rules
Résumé
- Imbriquez les sélecteurs enfants pour garder locaux les styles du composant ; ils se développent en descendants par défaut
- Utilisez
&pour les états du même élément (:hover,.is-active) et les combinateurs explicites - Imbriquez
@mediaà côté du composant que vous réglez - Gardez les nids peu profonds ; le nesting est de la structure, pas des tokens ni des maths
- Suite du Modern Toolkit : container queries — styler selon la taille du parent, pas seulement le viewport
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut