BEM : nommage des blocs, éléments et modificateurs
Appliquez la méthodologie Block-Element-Modifier pour créer des noms de classes prévisibles et réutilisables.
BEM : nommage des blocs, éléments et modificateurs est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Qu’est-ce que BEM ?
BEM (Bloc–Élément–Modificateur) est une convention de nommage qui crée des noms de classes explicites. Elle rend les composants CSS prévisibles et auto-documentés.
Bloc
Un bloc est un composant d’interface autonome et porteur de sens, qui peut exister indépendamment. Il constitue la classe racine du composant.
<div class="card">Card block</div>
<nav class="nav">Nav block</nav>
<button class="button">Button block</button>
<form class="search-form">Search form block</form>Élément
Un élément est un enfant d’un bloc qui n’a aucun sens en dehors de celui-ci. Les éléments utilisent un double trait de soulignement : .block__element.
<div class="card">
<div class="card__image">Image</div>
<div class="card__body">
<h2 class="card__title">Title</h2>
</div>
</div>
<nav class="nav">
<div class="nav__item"><a class="nav__link" href="#">Link</a></div>
</nav>Modificateur
Un modificateur est une variante ou un état d’un bloc ou d’un élément. Les modificateurs utilisent un double tiret : .block--modifier.
<button class="button button--primary">Primary</button>
<button class="button button--large">Large</button>
<div class="card card--featured">Featured Card</div>
<nav class="nav">
<div class="nav__item nav__item--active">Active Item</div>
</nav>Exemple BEM complet
Un composant de carte utilisant le nommage BEM :
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button button--primary card__action" href="#">Read More</a>
</div>
</div>Structure CSS BEM
Le CSS correspondant à la carte BEM :
<div class="card card--featured">
<div class="card__image" role="img" aria-label="Card image"></div>
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__text">Content</p>
<a class="button card__action" href="#">Read More</a>
</div>
</div>Avantage de BEM en matière de spécificité
Les classes BEM sont toutes des classes uniques (spécificité 0,1,0). Aucun sélecteur n’est plus spécifique qu’un autre, donc la surcharge est simple : il suffit d’ajouter la bonne classe de modification.
Erreurs BEM courantes
Évitez ces pièges de BEM :
- Éléments à plusieurs niveaux :
.card__body__title— aplatissez-les en.card__title - Éléments situés en dehors de leur bloc dans HTML
- Utilisation de sélecteurs d’élément comme
.nav__link a— cela ajoute une spécificité inutile
BEM avec des propriétés personnalisées CSS
BEM et les variables CSS s’associent naturellement. Définissez des jetons au niveau du bloc que les modificateurs peuvent surcharger :
<button class="button">Default</button>
<button class="button button--danger">Danger</button>Quand ne pas utiliser BEM
BEM est verbeux et ne convient pas idéalement aux classes utilitaires ou aux styles ponctuels. Les frameworks utilitaires d’abord, comme Tailwind, remplacent entièrement BEM. Utilisez BEM pour les bibliothèques de composants personnalisées lorsque le nommage sémantique est important.
BEM en pratique
De nombreux systèmes de conception utilisent des variantes de BEM ou des conventions de nommage similaires. La syntaxe précise compte moins que le principe appliqué de manière cohérente : bloc → élément → modificateur, sans imbrication profonde et avec une spécificité uniforme.
Vérification rapide
Dans BEM, quelle syntaxe représente un élément nommé « title » à l’intérieur d’un bloc nommé « card » ?
Récapitulatif
BEM utilise le nommage Bloc, Élément et Modificateur : .block__element--modifier. Toutes les classes sont des classes uniques, ce qui garantit une spécificité uniforme et équivalente. Les éléments (__) appartiennent à leur bloc. Les modificateurs (--) créent des variantes. Évitez les imbrications profondes comme .card__body__title : aplatissez-les en .card__title.
Questions Fréquemment Posées
La leçon « BEM : nommage des blocs, éléments et modificateurs » est-elle gratuite ?
Oui — le texte complet de « BEM : nommage des blocs, éléments et modificateurs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « BEM : nommage des blocs, éléments et modificateurs » ?
Appliquez la méthodologie Block-Element-Modifier pour créer des noms de classes prévisibles et réutilisables. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « BEM : nommage des blocs, éléments et modificateurs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Pourquoi l’architecture CSS est importante
- BEM : nommage des blocs, éléments et modificateurs
- Organisation des fichiers : ITCSS et modèle 7-1
- Éviter les conflits de spécificité