BEM (Block, Element, Modifier) est une convention de nommage CSS qui rend vos feuilles de style prévisibles et maintenables. Plutôt qu’une méthodologie rigide, c’est un système de nommage cohérent qui évite les conflits et clarifie les relations entre composants.

les trois piliers

block

Un composant autonome et réutilisable. C’est l’entité racine qui a du sens par elle-même.

.card { }
.button { }
.header { }

element

Une partie d’un block, sans sens en dehors de son contexte. Notation : block__element.

.card__title { }
.card__description { }
.button__icon { }

modifier

Une variante d’un block ou element. Notation : block--modifier ou block__element--modifier.

.button--primary { }
.button--large { }
.card__title--bold { }

exemple complet

<article class="card card--featured">
  <header class="card__header">
    <h2 class="card__title">titre de l'article</h2>
    <time class="card__date">29.08.2024</time>
  </header>
  
  <div class="card__body">
    <p class="card__description">
      Description concise du contenu de la carte.
    </p>
  </div>
  
  <footer class="card__footer">
    <button class="card__button card__button--primary">
      <span class="card__button-icon">→</span>
      <span class="card__button-text">lire plus</span>
    </button>
  </footer>
</article>

/* Block */
.card {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

/* Modifier du block */
.card--featured {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Elements */
.card__header {
  margin-bottom: 1rem;
}

.card__title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.card__date {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.card__body {
  margin-bottom: 1.5rem;
}

.card__description {
  line-height: 1.6;
  color: var(--text-secondary);
}

.card__footer {
  display: flex;
  justify-content: flex-end;
}

.card__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  background: var(--gray-200);
  cursor: pointer;
  transition: background 0.2s;
}

.card__button:hover {
  background: var(--gray-300);
}

/* Modifier de l'element */
.card__button--primary {
  background: var(--accent);
  color: white;
}

.card__button--primary:hover {
  background: var(--accent-dark);
}

.card__button-icon {
  font-size: 1.25rem;
}

.card__button-text {
  font-weight: 500;
}

bonnes pratiques

évitez l’imbrication profonde
card__header__title__icon → trop complexe
card__title-icon → mieux

un seul niveau d’element
Les elements appartiennent toujours au block, pas à d’autres elements.

/* ✗ Éviter */
.card__header__title { }

/* ✓ Préférer */
.card__title { }

les modificateurs ne remplacent pas la classe de base

<!-- ✗ Incorrect -->
<button class="button--primary">clic</button>

<!-- ✓ Correct -->
<button class="button button--primary">clic</button>

restez cohérent
Choisissez vos conventions (camelCase, kebab-case) et tenez-vous-y dans tout le projet.

pourquoi BEM ?

• clarté : on comprend la structure en lisant les classes
• modularité : les composants sont isolés et réutilisables
• spécificité faible : pas de guerre de !important
• scalabilité : fonctionne sur des projets de toute taille

BEM n’est pas une solution miracle, mais c’est un système éprouvé qui rend le CSS plus prévisible. À vous de l’adapter à vos besoins.