BEM et conventions de nommage CSS, avec générateur de classes | We.Inc
Comment BEM nomme les blocs, éléments et modificateurs, avec un générateur qui vérifie vos noms de classes. Comparez BEM avec les classes utilitaires, les CSS Modules et @scope.
BEM et conventions de nommage CSS
BEM signifie Block, Element, Modifier (bloc, élément, modificateur). Un bloc est un composant autonome comme .card, un élément est une partie qui n'a de sens qu'à l'intérieur du bloc, écrite .card__title avec deux tirets bas, et un modificateur est une variante écrite .card--featured avec deux traits d'union. Les modificateurs s'ajoutent à côté de la classe de base, jamais à sa place.
BEM en un tableau
Partie
Motif
Exemple
Bloc
.search-form
Élément
block__element
.search-form__input
Modificateur de bloc
block--modifier
.search-form--compact
Modificateur d'élément
block__element--modifier
.search-form__button--disabled
Modificateur clé et valeur
block--key-value
.search-form--theme-dark
C'est au nommage que les projets CSS restent propres ou deviennent peu à peu un empilement de surcharges. Cette page explique les règles BEM issues du site officiel de BEM, vérifie vos propres noms de classes pendant la saisie et compare BEM aux autres méthodes utilisées aujourd'hui par les équipes pour éviter les collisions de styles.
Saisissez un nom de bloc, puis éventuellement un élément et un modificateur, dans le générateur.
Lisez les noms de classes générés et le HTML qui les utilise. Des avertissements apparaissent quand un nom enfreint une règle BEM.
Copiez le squelette HTML et CSS dans votre composant.
Sélectionnez uniquement avec la classe seule. .card .card__title ajoute une spécificité que BEM cherche justement à éviter.
N'enchaînez jamais les éléments comme .card__body__title. Chaque élément appartient directement au bloc, quelle que soit sa profondeur dans le HTML.
Gardez la classe de base à côté d'un modificateur : class="btn btn--large", et non class="btn--large" seul.
Nommez les choses selon ce qu'elles sont, pas selon leur apparence. .alert--error survit à une refonte, .alert--red non.
Choisissez une convention par projet et documentez-la. Un mélange de styles est plus difficile à lire que n'importe lequel pris seul.
Questions fréquentes
Que signifie BEM ?
Block, Element, Modifier, soit bloc, élément, modificateur. C'est une méthode de nommage des classes CSS qui limite chaque sélecteur à une seule classe : la spécificité reste plate et le nom d'une classe indique à quel composant elle appartient.
Pourquoi BEM utilise-t-il des doubles tirets bas et des doubles traits d'union ?
Les traits d'union simples servent déjà à l'intérieur des noms, comme dans search-form. Doubler les séparateurs rend la frontière entre bloc, élément et modificateur sans ambiguïté : .search-form__submit-button se lit comme un bloc et un élément.
BEM vaut-il encore la peine avec Tailwind ou les CSS Modules ?
Avec des classes utilitaires, vous écrivez rarement des noms de classes de composants, BEM compte donc moins. Avec les CSS Modules, l'outil de build isole les noms pour vous, et des noms courts en camelCase sont recommandés. BEM reste un excellent choix pour le CSS pur, Sass, les thèmes WordPress et les design systems partagés entre frameworks.
Comment nommer un élément à l'intérieur d'un élément ?
Rattachez-le au bloc, pas à l'élément parent. Un titre dans le corps d'une carte s'écrit .card__title, même si le HTML l'imbrique dans .card__body. Si la partie imbriquée est réutilisable seule, faites-en plutôt un nouveau bloc.
Le problème que résolvent les conventions de nommage
Toutes les classes CSS vivent dans un seul espace de noms global. Deux développeurs qui écrivent .title dans des fichiers différents finiront par styliser les titres l'un de l'autre, et la correction habituelle, un sélecteur plus long, lance une course à la spécificité.
Une convention donne un propriétaire à chaque classe. Quand .pricing-card__price se comporte mal, vous savez quel composant ouvrir, et vous pouvez supprimer le composant en sachant que ses classes ne servent nulle part ailleurs.
Quand des blocs contiennent des blocs
Un bloc peut se trouver dans un autre bloc. Un bouton dans une carte reste .btn, et si la carte doit le positionner, le même élément peut porter les deux classes : class="btn card__action".
Ce mélange garde les styles propres du bouton réutilisables, tandis que la carte ne contrôle que la mise en page, comme la marge ou l'alignement, via sa classe d'élément.
La portée native du CSS rattrape son retard
@scope permet de limiter des règles à un sous-arbre, par exemple tout ce qui se trouve dans .card mais pas dans un .card__media imbriqué. Il est devenu Baseline récemment disponible en 2026 : vérifiez donc les navigateurs de votre audience avant de vous reposer uniquement dessus.
Les cascade layers résolvent un problème voisin : elles permettent de classer des groupes entiers de styles, pour qu'un reset ou un thème tiers ne l'emporte jamais sur vos composants, quelle que soit la spécificité de ses sélecteurs.
BEM comparé aux autres approches
Façons d'éviter les collisions de noms de classes
Approche
Exemple
Qui garantit des noms uniques
Usage idéal
BEM
.card__title--large
Vous, par convention
CSS pur, Sass, thèmes de CMS
Classes utilitaires (Tailwind)
text-lg font-semibold
Aucun nom de composant nécessaire
Applications construites à partir de composants
CSS Modules
styles.cardTitle
L'outil de build réécrit les noms
React, Vue et similaires avec un bundler
@scope
@scope (.card) { h2 {} }
Le navigateur limite les règles
Navigateurs récents, balisage léger
Un composant BEM complet
Bloc carte avec éléments et modificateurs
Chaque sélecteur est une seule classe. Le modificateur featured change la bordure et permet à un élément de réagir via le modificateur du bloc.
Erreurs BEM courantes
Incorrect et correct
Incorrect
Correct
Pourquoi
.card__body__title
.card__title
Les éléments appartiennent au bloc, pas à d'autres éléments
class="card--featured"
class="card card--featured"
Un modificateur a besoin de sa classe de base
.card .card__title
.card__title
L'imbrication supplémentaire ajoute de la spécificité
div.card__title
.card__title
Les sélecteurs BEM n'utilisent que des noms de classes
.card--blue
.card--primary
Nommez le sens, pas la couleur
Générateur de noms de classes BEM
Saisissez un bloc, un élément et un modificateur pour obtenir les noms de classes, le HTML et le CSS correspondants, avec des avertissements quand un nom enfreint une règle.
Bloc
Élément (facultatif)
Modificateur (facultatif)
Bloc
Élément
Modificateur
{label} : n'ajoutez pas vous-même __ ou -- ; le générateur ajoute les séparateurs.
{label} : utilisez des lettres latines minuscules, des chiffres et des traits d'union simples.
Les éléments ne peuvent pas contenir d'autres éléments.