Nesting natif

Definition

Syntaxe CSS native permettant d'imbriquer les sélecteurs enfants directement dans leur parent, comme en Sass. Utilise & pour référencer le sélecteur parent.

Analogie

Comme des poupées russes : chaque règle est contenue dans sa parente, reflétant la structure HTML.

Exemple de code

.card {
  padding: 1rem;
  & .title { font-size: 1.5rem; }
  &:hover { box-shadow: 0 2px 8px #0003; }
  @media (width > 768px) {
    padding: 2rem;
  }
}

Cas d'usage

Écrire du CSS organisé et lisible sans préprocesseur, en groupant les styles liés.

Anti-pattern

Termes lies