Lorsque l’on débute ou que l’on progresse en développement front-end, on se rend rapidement compte d’un fait simple : le CSS devient vite difficile à maintenir. Les fichiers s’allongent, les sélecteurs se croisent, et la moindre modification visuelle peut parfois casser un style ailleurs sur le site. C’est un problème classique. Pour répondre à ces difficultés, plusieurs méthodologies ont vu le jour. Parmi les plus connues et efficaces, deux se démarquent particulièrement : BEM et SOLID.
Ces deux approches visent à structurer votre code CSS de manière claire, prévisible et durable. Mais attention, même si elles poursuivent un objectif commun – l’organisation – elles le font avec des logiques différentes et complémentaires.
Dans ce tutoriel, nous allons découvrir en détail BEM et SOLID, ils sont une méthodologie de nommage et d’organisation du CSS qui a révolutionné la manière de concevoir les interfaces web modernes. Vous apprendrez ce que c’est, pourquoi les utiliser et comment les appliquer dans vos projets. Prêt à rendre votre CSS plus solide et plus lisible ? Allons-y.
- Qu’est-ce que la méthode BEM en CSS ?
- À quoi sert BEM ?
- Les avantages de BEM
- Quand utiliser BEM dans vos feuilles de styles ?
- Comment utiliser BEM ?
- Cas pratique : créer une carte utilisateur avec BEM
- SOLID : principes pour un CSS et code maintenable
- À quoi sert SOLID ?
- Les avantages de SOLID
- Quand et comment utiliser SOLID ?
- Cas pratique d’utilisation de SOLID
Qu’est-ce que la méthode BEM en CSS ?
BEM est un acronyme pour Block, Element, Modifier. Il s’agit d’une méthode de nommage et de structuration du code CSS développée à l’origine par Yandex, un géant du web russe. L’idée principale de BEM est simple : chaque partie de votre interface doit être pensée comme un composant indépendant.
Au lieu de créer un long fichier CSS avec des classes génériques comme .header, .menu, ou .btn, la méthode BEM vous invite à structurer vos classes selon leur rôle précis dans le composant.
Un composant (ou bloc) est une unité autonome de votre interface : cela peut être une carte d’article, un bouton, une barre de navigation, etc. À l’intérieur de ce bloc, on trouve des éléments, c’est-à-dire les sous-parties qui dépendent de ce bloc (par exemple, le titre de la carte, l’image, le bouton d’action).
Enfin, les modificateurs permettent de créer des variantes visuelles ou comportementales de ces blocs ou éléments.
La syntaxe BEM suit une logique bien précise :
.block {}
.block__element {}
.block--modifier {}Prenons un exemple simple : un bouton.
En BEM, nous aurons :
.button {} /* Le bloc principal */
.button--primary {} /* Variante de style : bouton principal */
.button__icon {} /* Élément interne du bouton, ici une icône */Chaque nom de classe devient donc explicite : il décrit clairement ce qu’il est et à quoi il appartient. Cela rend le code CSS facile à lire, à maintenir et à réutiliser.
À quoi sert BEM ?
L’objectif principal de BEM est de donner une structure logique et prévisible à votre CSS.
En utilisant cette méthode, vous éliminez une grande partie de l’ambiguïté qui rend le CSS difficile à maintenir.
BEM sert donc à :
- Créer des composants indépendants : chaque bloc est autonome et ne dépend pas des autres. Cela évite les effets de bord entre différents éléments de la page.
- Faciliter la réutilisation du code : un bloc BEM peut être déplacé, copié ou stylisé dans un autre contexte sans risquer de casser l’ensemble.
- Améliorer la lisibilité : le nommage explicite des classes rend le code compréhensible, même plusieurs mois après son écriture.
- Favoriser le travail d’équipe : lorsque plusieurs développeurs interviennent sur le même projet, BEM établit une convention claire que tout le monde peut suivre.
En résumé, BEM transforme votre CSS en un ensemble de briques modulaires, faciles à assembler, à modifier et à maintenir. Cela rejoint l’idée de base du développement moderne : penser en composants.
Les avantages de BEM
L’utilisation de BEM apporte de nombreux bénéfices concrets dans le quotidien du développeur web.
Lisibilité accrue du code
Les noms de classes BEM ne laissent aucune ambiguïté. Par exemple, .card__title indique immédiatement qu’il s’agit du titre d’une carte. Cela permet de comprendre rapidement la structure HTML et d’anticiper les interactions entre les éléments.
Meilleure maintenance
Modifier un style devient plus sûr : comme les blocs sont indépendants, vous pouvez ajuster l’apparence d’un composant sans craindre d’impacter le reste du site.
Réutilisabilité du CSS
Un bloc conçu avec BEM peut être réutilisé dans différentes pages, voire dans d’autres projets. Il suffit d’inclure la même structure HTML et d’importer le CSS associé.
Compatibilité avec les frameworks modernes
BEM s’intègre parfaitement avec les approches modernes de développement comme React, Vue.js ou Angular, qui reposent justement sur le concept de composants réutilisables. Il est donc idéal pour les projets évolutifs.
Uniformisation du code
Enfin, BEM instaure une convention commune au sein d’une équipe de développement. Fini les différences de nommage entre développeurs : tout le monde parle le même langage.
Les limites de BEM
Comme toute méthode, BEM n’est pas parfaite.
Ses limites ne sont pas liées à son efficacité, mais plutôt à son niveau de rigueur.
Des noms de classes parfois longs
Le principal reproche fait à BEM concerne la longueur de ses classes. Par exemple, .product-card__description--highlighted peut sembler verbeux, surtout sur des projets où de nombreux éléments s’enchaînent.
Cependant, cette “longueur” est le prix de la clarté.
Une courbe d’apprentissage pour les débutants
Pour ceux qui découvrent le concept, il faut un peu de temps pour comprendre la logique entre blocs, éléments et modificateurs.
Mais une fois cette logique acquise, elle devient naturelle.
Une rigueur obligatoire
BEM exige de la discipline.
Si vous mélangez les conventions ou que vous ne respectez pas la hiérarchie (par exemple, utiliser un élément sans bloc parent), votre code perd en cohérence et en lisibilité.
Un risque d’excès
Parfois, des développeurs appliquent BEM de façon trop stricte, créant une complexité inutile pour des projets simples.
Il faut donc savoir doser son usage selon la taille et la durée de vie du projet.
Quand utiliser BEM dans vos feuilles de styles ?
BEM est particulièrement adapté aux projets de moyenne à grande envergure, ou à ceux qui doivent évoluer dans le temps.
Si vous travaillez sur un site d’entreprise, une plateforme e-commerce, ou une application web en équipe, BEM devient un allié précieux. Il permet à chacun de comprendre rapidement la structure du projet et d’éviter les collisions de styles.
Vous pouvez aussi l’utiliser sur un projet personnel, même de petite taille, pour acquérir de bonnes habitudes.
Dès que vous avez plusieurs composants récurrents (cartes, boutons, sections, formulaires), BEM vous fera gagner du temps à long terme.
Comment utiliser BEM ?
Appliquer BEM dans vos fichiers CSS et HTML demande simplement de suivre une méthodologie stricte mais logique.
Imaginons que vous construisiez une carte produit.
Voici le HTML classique avec BEM :
<article class="product-card">
<img src="image.jpg" alt="Chaussures de sport" class="product-card__image">
<h2 class="product-card__title">Chaussures de sport</h2>
<p class="product-card__price">59,99 €</p>
<button class="product-card__button product-card__button--primary">Acheter</button>
</article>Et voici le CSS correspondant :
.product-card {
background-color: #fff;
border-radius: 8px;
padding: 1rem;
}
.product-card__image {
width: 100%;
border-bottom: 1px solid #ddd;
}
.product-card__title {
font-size: 1.2rem;
font-weight: bold;
}
.product-card__price {
color: #008000;
}
.product-card__button {
padding: 0.5rem 1rem;
border: none;
cursor: pointer;
}
.product-card__button--primary {
background-color: #007bff;
color: white;
}Ce code illustre la puissance de BEM : chaque classe est lisible, indépendante et compréhensible.
Vous pouvez ajouter une autre variante de carte (.product-card--promo) sans impacter le reste du design.
BEM repose donc sur trois principes fondamentaux :
- Le Bloc, composant principal autonome
- L’Élément, sous-partie dépendante du bloc
- Le Modificateur, variante du bloc ou de l’élément
Appliqués avec rigueur, ces trois concepts transforment votre CSS en un ensemble logique, clair et durable.
Cas pratique : créer une carte utilisateur avec BEM
Dans cette partie, nous allons construire un composant complet, une carte utilisateur, en appliquant strictement la méthodologie BEM.
Ce cas pratique vous permettra de comprendre comment structurer vos blocs, éléments et modificateurs pour créer un CSS clair, modulable et facilement maintenable.
Définir le bloc principal
Le premier réflexe avec BEM est de penser en blocs. Chaque bloc est un composant autonome.
Pour notre exemple, le bloc principal sera user-card. Il représente l’ensemble de la carte d’utilisateur, contenant l’image, le nom, la description et un bouton d’action.
HTML du bloc principal :
<article class="user-card">
</article>CSS minimal pour le bloc :
.user-card {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 1rem;
max-width: 300px;
font-family: Arial, sans-serif;
}Ici, nous avons défini un bloc autonome, indépendant du reste de la page. Il est prêt à accueillir ses éléments internes.
Ajouter les éléments du bloc
Dans BEM, les éléments sont des parties du bloc. Ils sont nommés avec la syntaxe bloc__element. Pour notre carte utilisateur, nous aurons trois éléments principaux : l’image, le nom et la description.
HTML complet des éléments :
Des formations informatique pour tous !
Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…
Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.
Découvrez mes formations Qui suis-je ?<article class="user-card">
<img src="avatar.jpg" alt="Photo utilisateur" class="user-card__avatar">
<h2 class="user-card__name">Alban Dupont</h2>
<p class="user-card__bio">Développeur web passionné, spécialisé en HTML, CSS et PHP.</p>
<button class="user-card__button user-card__button--primary">Suivre</button>
</article>CSS correspondant aux éléments :
.user-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 1rem auto;
}
.user-card__name {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
margin-bottom: 0.5rem;
}
.user-card__bio {
font-size: 0.95rem;
color: #555;
text-align: center;
margin-bottom: 1rem;
}
.user-card__button {
display: block;
width: 100%;
padding: 0.5rem 0;
border: none;
border-radius: 5px;
cursor: pointer;
}Chaque élément est clairement lié à son bloc parent, et son nom explicite évite toute confusion avec d’autres parties de la page.
Ajouter des modificateurs pour les variantes
Les modificateurs permettent de créer des variantes visuelles ou fonctionnelles d’un bloc ou d’un élément.
Par exemple, nous pouvons avoir un bouton “primaire” pour suivre l’utilisateur et un bouton “secondaire” pour envoyer un message.
CSS pour les modificateurs :
.user-card__button--primary {
background-color: #007bff;
color: white;
}
.user-card__button--secondary {
background-color: #f0f0f0;
color: #333;
}HTML avec deux variantes :
<button class="user-card__button user-card__button--primary">Suivre</button>
<button class="user-card__button user-card__button--secondary">Message</button>Les modificateurs sont faciles à identifier et à appliquer, et ils ne nécessitent pas de réécrire le CSS de base du bouton.
Ajouter un bloc enfant si nécessaire
BEM permet également de créer des blocs imbriqués, totalement indépendants.
Par exemple, si vous voulez ajouter un indicateur de statut en ligne, vous pouvez créer un bloc status-indicator :
HTML imbriqué :
<div class="user-card__status">
<span class="status-indicator status-indicator--online"></span>
</div>CSS pour le bloc enfant :
.status-indicator {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: gray;
}
.status-indicator--online {
background-color: green;
}
.status-indicator--offline {
background-color: red;
}Vous voyez ici que le bloc enfant reste indépendant. Vous pouvez le réutiliser ailleurs sans problème, même hors de user-card.
Structurer le projet CSS avec BEM
Dans un projet réel, il est recommandé de séparer vos fichiers CSS par blocs, ou au moins par catégories de composants. Par exemple :
/css
/base
reset.css
typography.css
/components
user-card.css
button.css
card.css
/layout
header.css
footer.css
grid.cssCette organisation, combinée à BEM, rend votre CSS facile à maintenir et évolutif, même dans des projets complexes.
Avantages du cas pratique
Avec cet exemple concret, vous pouvez constater que BEM apporte :
- Une structure claire du HTML et du CSS.
- Une réutilisabilité totale des composants.
- Une indépendance des blocs, évitant les effets de bord entre styles.
- Une compréhension immédiate du code, même pour un autre développeur qui n’a jamais touché le projet.
Ce cas pratique illustre parfaitement pourquoi BEM est devenu un standard dans les projets front-end modernes.
SOLID : principes pour un CSS et code maintenable
Si BEM s’intéresse principalement à l’organisation et au nommage des classes CSS, SOLID est un ensemble de cinq principes fondamentaux issus de la programmation orientée objet (OOP).
Ces principes ont pour objectif de rendre le code plus robuste, évolutif et facile à maintenir, non seulement pour le CSS (quand il est couplé à des composants JS ou React) mais aussi pour tout code front-end moderne.
L’acronyme SOLID se décompose ainsi :
- S – Single Responsibility Principle (SRP) : chaque composant ou module doit avoir une seule responsabilité.
- O – Open/Closed Principle (OCP) : les composants doivent être ouverts à l’extension mais fermés à la modification.
- L – Liskov Substitution Principle (LSP) : les sous-composants doivent pouvoir remplacer leurs composants parents sans casser le fonctionnement global.
- I – Interface Segregation Principle (ISP) : mieux vaut avoir plusieurs interfaces spécifiques que des interfaces trop générales.
- D – Dependency Inversion Principle (DIP) : les composants de haut niveau ne doivent pas dépendre directement des composants de bas niveau, mais passer par des abstractions.
SOLID encourage la modularité, la réutilisabilité et la maintenabilité. Ces principes sont très utilisés dans des frameworks modernes comme React, Vue ou Angular pour structurer le code de manière propre et évolutive.
À quoi sert SOLID ?
SOLID a pour objectif de réduire les bugs et faciliter les évolutions.
Si vous combinez SOLID avec BEM dans un projet front-end, vous obtenez :
- Des composants CSS et JS indépendants, faciles à tester et à réutiliser.
- Une réduction des conflits et effets de bord : chaque bloc ou module respecte une seule responsabilité.
- Une adaptabilité aux besoins futurs : ajouter une fonctionnalité ou modifier le style d’un composant n’impacte pas le reste du site.
- Une collaboration fluide en équipe : tous les développeurs comprennent immédiatement la structure et les responsabilités des modules.
En bref, SOLID est la garantie que votre code reste propre, lisible et durable, même dans les projets complexes et en constante évolution.
Les avantages de SOLID
L’application des principes SOLID offre de nombreux bénéfices :
Modularité maximale
Chaque composant ou module est autonome. Cela facilite la réutilisation et la lecture du code.
Maintenance facilitée
Comme chaque module a une responsabilité unique, corriger un bug ou améliorer une fonctionnalité devient simple et sûr.
Extensibilité
Le code est conçu pour pouvoir être étendu sans modifier les modules existants, limitant les risques d’introduire des erreurs.
Travail d’équipe optimisé
En respectant SOLID, chaque développeur sait exactement quelles parties du code il peut modifier, et comment ajouter de nouvelles fonctionnalités sans perturber le projet.
Testabilité améliorée
Les composants respectant SOLID sont plus faciles à tester, car ils sont indépendants et ont des comportements prévisibles.
Les limites de SOLID
Malgré ses nombreux avantages, SOLID présente certaines limites :
Complexité pour les débutants
Les principes SOLID demandent une bonne compréhension de la programmation orientée objet et des concepts de modularité. Pour un débutant, appliquer SOLID peut sembler abstrait.
Surcharge de code
Dans des projets très petits, appliquer SOLID peut générer un surcoût en termes de fichiers et modules, qui peut paraître inutile. Il faut donc adapter son utilisation à la taille et à la complexité du projet.
Risque de sur-ingénierie
Certains développeurs appliquent SOLID trop strictement, créant des modules trop fragmentés et rendant le code difficile à suivre. La clé est de trouver un équilibre entre modularité et simplicité.
Quand et comment utiliser SOLID ?
SOLID est particulièrement utile dans des projets moyens à grands, surtout lorsque l’on travaille avec des composants réutilisables (React, Vue, Angular).
Voici quelques conseils pratiques pour l’utiliser efficacement :
- Appliquez SRP dès la conception
Chaque composant doit avoir une responsabilité unique. Par exemple, une carte utilisateur doit uniquement afficher les informations, pas gérer la logique de suivi ou les notifications. - Respectez OCP pour les styles et fonctionnalités
Si vous devez ajouter une variante de carte (par exemple carte premium), créez un module ou un modificateur BEM au lieu de modifier le bloc existant. - Utilisez LSP pour les composants enfants
Si vous créez des sous-cartes ou des extensions de composants, assurez-vous qu’elles peuvent remplacer le composant parent sans casser le rendu ou les fonctionnalités. - Segmentez vos interfaces avec ISP
Ne créez pas de composants ou classes qui gèrent trop de fonctionnalités. Préférez plusieurs interfaces simples et spécialisées. - Inversion des dépendances avec DIP
Faites passer les dépendances via des abstractions ou des props plutôt que de dépendre directement d’un module concret. Par exemple, passez les données utilisateur à un composant via une interface ou un objet JSON, plutôt que de l’y coder en dur.
Cas pratique d’utilisation de SOLID
Pour illustrer SOLID, reprenons notre carte utilisateur en React avec BEM pour le CSS.
// UserCard.js
import React from 'react';
import './user-card.css';
function UserCard({ user, onFollow, onMessage }) {
return (
<article className="user-card">
<img src={user.avatar} alt="Photo utilisateur" className="user-card__avatar" />
<h2 className="user-card__name">{user.name}</h2>
<p className="user-card__bio">{user.bio}</p>
<button className="user-card__button user-card__button--primary" onClick={() => onFollow(user.id)}>Suivre</button>
<button className="user-card__button user-card__button--secondary" onClick={() => onMessage(user.id)}>Message</button>
</article>
);
}
export default UserCard;Ici, nous respectons SOLID :
- SRP :
UserCardne fait qu’afficher la carte et déclencher des callbacks. La logique métier est ailleurs. - OCP : Pour créer une carte premium, on peut ajouter un modificateur BEM
.user-card--premiumsans toucher au composant existant. - LSP : On pourrait créer
AdminCardqui hérite ou étendUserCardsans casser la structure. - ISP : Chaque bouton a son interface spécifique (
onFollow,onMessage). - DIP : Les fonctions
onFollowetonMessagesont injectées via props, pas codées dans le composant.
Ce simple exemple montre comment BEM et SOLID se complètent : BEM structure le CSS, SOLID structure le code et les interactions.
BEM et SOLID ne sont pas de simples règles à suivre par tradition. Ce sont deux piliers pour écrire du code maintenable, lisible et réutilisable, que ce soit en CSS ou dans vos composants JavaScript.
BEM vous offre une structure claire et compréhensible, idéale pour créer des interfaces modulaires et indépendantes. Il rend vos classes explicites et votre CSS facile à maintenir sur le long terme. SOLID, quant à lui, vous apprend à organiser vos composants et modules de manière cohérente, à réduire les effets de bord et à rendre le code adaptable à l’évolution des besoins.
En combinant ces deux méthodologies, vous obtenez un workflow solide : vos composants sont autonomes, réutilisables, évolutifs et faciles à tester, tout en gardant un code CSS clair et structuré. C’est exactement ce que recherchent les équipes modernes et les projets front-end complexes.
Adopter BEM et SOLID, c’est donc anticiper l’avenir de vos projets, améliorer la collaboration avec vos collègues et réduire le stress lié à la maintenance d’un code qui devient trop vite chaotique. En somme, c’est investir dans la qualité et la pérennité de votre travail.
