Méthode BEM en CSS : des classes claires pour des composants autonomes et maintenables

Vous ciblez une carte avec une chaîne comme main section div, puis vous la déplacez ou la dupliquez, et le style disparaît parce que le sélecteur dépendait de la structure HTML. La méthode BEM (Bloc, Élément, Modificateur) règle ce problème à la source : chaque composant porte ses propres classes, se lit d'un coup d'œil et fonctionne où que vous le posiez dans la page. Vous l'appliquez en live coding sur une carte de profil, puis sur une carte d'avis client complète avec sa variante mise en avant, le tout rangé dans une feuille de style organisée en cascade layers.

Méthode BEM : ce que vous saurez faire

À la fin du cours, la convention BEM devient un réflexe sur chaque composant que vous codez.

• Rendre un composant indépendant de sa place dans la page
• Nommer blocs et éléments avec la convention du double underscore
• Décliner une variante sans réécrire le composant de base
• Déclarer vos éléments à plat, sans chaîne de sélecteurs parents
• Décider si un bouton appartient au bloc ou devient un composant
• Ranger vos composants BEM dans une architecture en layers
• Masquer des émojis décoratifs aux lecteurs d'écran

Modificateur BEM : une variante sans dupliquer le CSS

Le modificateur est ce qui fait gagner le plus de temps. La carte « premium » comme l'avis « à la une » reprennent tout ce que le bloc définit déjà, padding, largeur maximale, arrondi, et ne redéclarent que ce qui change : fond sombre, couleurs du nom et du texte, ombre plus marquée, badge positionné en haut à droite. Le cours montre aussi la limite de l'exercice : pour recolorer un élément dans la variante, on repart du sélecteur parent, ce que le nesting CSS permettra d'alléger dans l'épisode suivant de la série.

BEM et cascade layers : reset, base, components, utilities

La carte d'avis client se construit en trois temps, HTML sémantique, attributs ARIA, puis classes BEM, avant de passer au CSS. La feuille reprend les quatre layers vus dans le cours sur la cascade, la spécificité et les layers, et place chaque composant dans le layer components, commenté et ordonné comme le HTML. Une vidéo revient sur la carte produit codée dans cet épisode précédent pour y lire la structure BEM déjà en place. Côté accessibilité, les étoiles en émoji sont retirées de l'arbre d'accessibilité avec aria-hidden ; pour creuser ces attributs, voyez le cours sur les attributs ARIA essentiels.

Pour qui

Le badge Intermédiaire est justifié : vous écrivez déjà du HTML et du CSS sans aide, et vous connaissez Flexbox et le positionnement, que le cours utilise sans les réexpliquer. Il se suit seul pour apprendre BEM, mais la vidéo de reprise sera plus parlante si vous avez vu l'épisode sur les layers. Aucun framework ni préprocesseur : uniquement du CSS natif, écrit dans Visual Studio Code.

Pour aller plus loin

Vous voulez regrouper les éléments d'un bloc directement dans son sélecteur : le tuto gratuit sur le nesting CSS pose les bases de l'imbrication native que la série combinera ensuite avec BEM.