CSS Nesting

Introduction Introduction

Le nesting CSS est une technique d’imbrication des sélecteurs CSS pour éviter la répétition de code.

Elle était déjà disponible avec les préprocesseurs CSS comme Sass, Less ou Stylus.

Nesting parent-enfant Nesting parent-enfant

Pour imbriquer des sélecteurs CSS, on peut utiliser le sélecteur d’imbrication & qui fait référence au parent.

.parent {
  /* parent styles */
  & .child1 {
    /* child1 styles */
  }
  .child2 {
    /* child2 styles */
  }
  &.second-class {
    /* second-class styles */
  }
}

ce qui équivaut à :

.parent .child1 {
  /* child1 styles */
}
.parent .child2 {
  /* child2 styles */
}
.parent.second-class {
  /* second-class styles */
}

Nesting et combinateurs Nesting et combinateurs

On peut imbriquer des sélecteurs CSS avec des combinateurs : + ou le sélecteur enfant direct > ou autre combinateur.

.parent {
  /* parent styles */
  > .directchild {
    /* directchild styles */
  }
  + .sibling {
    /* sibling styles */
  }
}

ce qui équivaut à :

.parent > .directchild {
  /* directchild styles */
}
.parent + .sibling {
  /* sibling styles */
}

Pseudo-class ou pseudo-element Pseudo-class ou pseudo-element

.parent-pseudo {
  background: red;
  &:hover,
  &:focus {
    background: blue;
  }
  &:is(p, em, i) {
    background: blue;
  }
  &::after,
  &::before {
    content: '✅️';
  }
  /* Ici le sélecteur d'imbrication est OBLIGATOIRE */
  ::after {
    content: '❌️';
  }
}

ce qui équivaut à :

.parent-pseudo {
  background: red;
}
.parent-pseudo:hover,
.parent-pseudo:focus,
.parent-pseudo:is(p, em, i) {
  background: #00f;
}
.parent-pseudo:after,
.parent-pseudo:before {
  content: '✅️';
}
/* on constate que l'imbrication n'est pas correcte */
.parent-pseudo :after {
  content: '❌️';
}

Scoper sur un ancêtre Scoper sur un ancêtre

Dans un contexte de projet, il se peut parfois que la spécificité ou la portée des sélecteurs CSS soit un problème. Ou bien on peut vouloir définir des valeurs différents en fonction de la présence d’un context parent.

.component {
  background: red;
  .ancestor & {
    background: orange;
  }
}

ce qui équivaut à :

.component {
  background: red;
}

.ancestor .component {
  background: orange;
}

Nesting CSS vs Sass Nesting CSS vs Sass

Le fonctionnement du nesting CSS est similaire à celui de Sass mais la concaténation de nom n’est pas possible.

/* ❌️ */
.block {
  background: green;
  &__element {
    background: blue;
    &--modifier {
      background: red;
    }
  }
}

Medias et containers Medias et containers

On peut également imbriquer des medias ou containers queries :

Media queries Media queries

.demo {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: var(--max-width);
  margin-block: auto;
  align-content: flex-start;
  align-items: flex-start;
  margin-block-end: 2rem;
  @media screen and (width < 1100px) {
    max-width: 90vw;
  }
}

Container queries Container queries

select {
  width: 50%;

  @container select-container (width <= 320px) {
    width: 100%;
  }
}

Lightning CSS playground Lightning CSS playground

Voici un lien vers le playground LighningCSS pour tester le nesting CSS : LightningCSS

Conclusion Conclusion

Le nesting CSS est une fonctionnalité native qui permet d’éviter la répétition de code et de mieux structurer le CSS comme on pouvait le faire avec les préprocesseurs. C’est donc une bonne nouvelle pour les développeurs front-end, merci pour la lecture !