Méthodologie BEM : comment structurer ses classes CSS intelligemment ?

Si vous avez déjà été confronté à un fichier CSS digne d’une toile d’araignée, la méthodologie BEM pourrait bien être votre salut. Cette convention de nommage permet de structurer son CSS de manière claire et logique. Adieu les conflits de classes et bonjour à une maintenance simplifiée !

Dans cet article, nous allons explorer cette méthode en profondeur, ses avantages, ses inconvénients et comment l’utiliser efficacement.

Qu’est-ce que la méthodologie BEM ?

BEM, acronyme de Block, Element, Modifier, est une convention de nommage qui vise à organiser les classes CSS de manière hiérarchique.

Elle repose sur trois notions essentielles :

1. Block (B) : un composant autonome, comme un bouton ou une carte ;
2. Element (E) : une partie du bloc qui ne peut exister de façon indépendante (exemple : un titre dans une carte) ;
3. Modifier (M) : une variation du bloc ou de l’élément (exemple : un bouton actif, un titre en gras).

Exemple concret

.button {
  background-color: blue;
  color: white;
}

.button--primary {
  background-color: red;
}

.button__icon {
  margin-right: 8px;
}

Dans cet exemple, .button est un bloc, .button__icon est un élément et .button–primary est un modificateur.

Pourquoi adopter BEM dans vos projets web ?

Les avantages

• Lisibilité accrue : les classes sont explicites, facilitant la lecture et la compréhension du CSS.
• Maintenance simplifiée : facile à mettre à jour sans impacter d’autres éléments.
• Modularité : favorise la réutilisation des composants.
• Moins de conflits de styles : réduit les problèmes de sélecteurs trop génériques.
• Compatible avec Sass et autres préprocesseurs CSS : permet une meilleure organisation des fichiers styles.

Les inconvénients de la méthodologie BEM

• Noms de classes parfois longs : peuvent sembler verbeux, mais restent compréhensibles.
• Courbe d’apprentissage : demande un temps d’adaptation.
• HTML plus chargé : peut entraîner une multiplication des classes.

BEM en pratique

Exemple d’un composant « Carte de produit » en BEM

<div class="product-card">
  <h2 class="product-card__title">Nom du produit</h2>
  <p class="product-card__description">Description du produit</p>
  <button class="product-card__button--primary">Acheter</button>
</div>

Exemple avec Sass

.product-card {
  border: 1px solid #ddd;
  padding: 16px;

  &__title {
    font-size: 20px;
  }

  &__button {
    background-color: blue;
    color: white;

    &--primary {
      background-color: red;
    }
  }
}

BEM et les CMS WordPress & WooCommerce

Si vous utilisez WordPress, sachez que de nombreux plugins, comme WooCommerce, adoptent déjà cette convention.

Cela facilite l’ajout de styles personnalisés sans risquer de casser la structure existante.

Exemple de classe WooCommerce en BEM

.woocommerce-product__title {
  font-size: 24px;
}

Liens utiles et ressources externes

Si vous souhaitez approfondir le sujet, voici quelques références intéressantes :

• La documentation officielle de BEM
• MDN Web Docs : les bonnes pratiques CSS

Conclusion

La méthodologie BEM est une solution efficace pour structurer ses styles CSS et optimiser la maintenance des projets web.

Certes, elle demande un temps d’adaptation, mais les bénéfices à long terme en valent largement la peine. Alors, prêts à structurer votre CSS comme des pros ?