BEM + Sass

Sass 🟡 Mid

Définition

Convention de nommage Block__Élément--Modifier combinée avec le nesting Sass et le caractère &. Créé des classes plates et prévisibles.

Analogie

Un système d'adresse : Immeuble__Appartement--Variante (card__title--large).

Exemple de code

.card {
  padding: 1rem;
  &__header { border-bottom: 1px solid #eee; }
  &__title { font-size: 1.25rem; }
  &--featured {
    border-color: gold;
    .card__title { color: gold; }
  }
}

Cas d'usage

Nommer les classes CSS de façon prévisible et éviter les conflits de spécificité.

Anti-pattern

Imbriquer les éléments BEM trop profond (.card__header__title__icon au lieu de .card__icon).

Termes liés

#styling#interview#sass

← → au clavier pour passer d'une fiche à l'autre