Méthodologie BEM : bloc, élément et modificateur
Nommez les classes CSS selon le motif Block__Element--Modifier afin de créer des styles de composants explicites, à faible spécificité et réutilisables.
Méthodologie BEM : bloc, élément et modificateur est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que BEM ?
BEM (bloc, élément, modificateur) est une convention de nommage CSS qui rend les styles prévisibles, réutilisables et exempts de conflits. En encodant la structure des composants dans les noms de classes, elle élimine les conflits de spécificité et les collisions accidentelles de styles.
Blocs — Composants autonomes
Un bloc est un composant indépendant et réutilisable : card, button, nav. Le nom de classe est celui du bloc, écrit en minuscules avec des traits d'union.
<div class="card">...</div>
<button class="btn">...</button>
<nav class="main-nav">...</nav>Éléments — Parties d'un bloc
Un élément est une partie d'un bloc qui n'a pas de signification autonome. Utilisez deux traits de soulignement : block__element.
<div class="card">
<img class="card__image" src="..." alt="...">
<div class="card__body">
<h2 class="card__title">Title</h2>
<p class="card__description">...</p>
</div>
<footer class="card__footer">
<a class="card__link" href="...">Read more</a>
</footer>
</div>Modificateurs — Variantes et états
Un modificateur modifie l'apparence ou le comportement d'un bloc ou d'un élément. Utilisez deux traits d'union : block--modifier ou block__element--modifier.
<button class="btn">Default</button>
<button class="btn btn--primary">Primary</button>
<button class="btn btn--danger btn--large">Large Danger</button>
<div class="card card--featured">...</div>
<nav class="main-nav main-nav--collapsed">...</nav>Règles CSS de BEM
Les classes BEM ont une spécificité faible et uniforme (une seule classe chacune). Cela rend les styles faciles à remplacer. N'utilisez jamais d'ID ni de sélecteurs d'éléments imbriqués : ils augmentent la spécificité de manière imprévisible.
/* Good BEM CSS */
.card { /* ... */ }
.card__title { /* ... */ }
.card--featured { /* ... */ }
/* Avoid */
.card h2 { /* targets any h2 in .card — too broad */ }
#featured-card { /* high specificity — hard to override */ }BEM avec Sass
Le sélecteur parent & de Sass rend l'écriture de BEM moins verbeuse. Le CSS compilé est identique à celui de BEM écrit directement.
.card {
padding: 16px;
&__title {
font-size: 1.25rem;
font-weight: 600;
}
&__body {
color: var(--color-text-secondary);
}
&--featured {
border: 2px solid var(--color-brand);
}
}Quand créer un nouveau bloc
Créez un nouveau bloc lorsque le composant peut fonctionner seul et être réutilisé dans différents contextes. Créez un élément lorsque cette partie n'a de sens qu'à l'intérieur d'un bloc précis.
BEM évite l'imbrication
BEM déconseille l'imbrication profonde en HTML et en CSS. Un élément situé dans un autre élément reste block__element, et non block__element__subelement.
<!-- Correct: -->
<div class="card">
<div class="card__meta">
<time class="card__date">Jan 1</time>
</div>
</div>
<!-- Wrong: -->
<div class="card">
<div class="card__meta">
<time class="card__meta__date">Jan 1</time> <!-- 3 levels = wrong -->
</div>
</div>BEM et JavaScript
Utilisez une classe distincte spécifique à JS pour les points d'ancrage comportementaux : le préfixe js-. Cela découple le style et les scripts : renommer une classe BEM ne rompra pas le comportement JavaScript.
<button class="btn btn--primary js-submit">Submit</button>
// JS: select by js- class
document.querySelector('.js-submit').addEventListener('click', handleSubmit);Combiner des blocs BEM
Un élément peut posséder plusieurs classes de bloc afin d'appliquer un style adapté au contexte sans coupler les blocs.
<button class="btn btn--primary form__submit">Submit</button>Limites de BEM
Les noms de classes peuvent devenir longs. BEM fonctionne mieux pour les grandes équipes et les systèmes de conception où la cohérence globale des styles est importante. Pour les frameworks de composants (React/Vue) utilisant des styles à portée limitée, les avantages liés à l'espace de noms de BEM sont moins essentiels.
Vérification rapide
Dans BEM, que représente card__title--truncated ?
Récapitulatif : BEM
Bloc : composant autonome. Élément (deux traits de soulignement __) : partie d'un bloc. Modificateur (deux traits d'union --) : variante ou état. Spécificité faible et uniforme. Évitez les sélecteurs d'ID et l'imbrication profonde. Utilisez le préfixe js- pour les points d'ancrage JavaScript. Sass & rend BEM moins verbeux. Excellent pour les grandes équipes et les systèmes de conception.
Questions Fréquemment Posées
La leçon « Méthodologie BEM : bloc, élément et modificateur » est-elle gratuite ?
Oui — le texte complet de « Méthodologie BEM : bloc, élément et modificateur » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Méthodologie BEM : bloc, élément et modificateur » ?
Nommez les classes CSS selon le motif Block__Element--Modifier afin de créer des styles de composants explicites, à faible spécificité et réutilisables. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 1 sur 4.
Combien de temps prend la leçon « Méthodologie BEM : bloc, élément et modificateur » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Méthodologie BEM : bloc, élément et modificateur
- Modules CSS : noms de classes à portée limitée
- CSS-in-JS : Styled-components et Emotion
- Tailwind CSS : approche fondée sur les utilitaires