Nesting

Définition

Possibilité d'imbriquer les sélecteurs pour refléter la hiérarchie HTML. Le caractère & référence le sélecteur parent.

Analogie

Des poupées russes : chaque niveau contient le suivant, et & c'est la poupée dans laquelle tu te trouves.

Exemple de code

.card {
  padding: 1rem;
  &__title { font-size: 1.5rem; }
  &:hover { box-shadow: 0 4px 6px #0002; }
  &.is-active { border-color: blue; }
}

Cas d'usage

Organiser le CSS en suivant la structure des composants et la convention BEM.

Anti-pattern

Termes liés