BEM + Sass

Sass 🟡 Mid

Definition

Convention de nommage Block__Element--Modifier combinee avec le nesting Sass et le caractere &. Cree des classes plates et previsibles.

Analogie

Un systeme 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 facon previsible et eviter les conflits de specificite.

Anti-pattern

Imbriquer les elements BEM trop profond (.card__header__title__icon au lieu de .card__icon).

Termes lies

#styling#interview#sass