Sur un projet d’envergure géré à quatre développeurs différents, chacun intervenant sur des périodes distinctes selon la charge de travail de l’agence, le fichier de CSS personnalisé du site Elementor avait fini par accumuler des classes aux noms disparates : .box1, .custom-blue, .section-header-v2. Un nouveau développeur reprenant une section du site ne pouvait jamais deviner, à la lecture d’un nom de classe, à quoi elle correspondait précisément ni si elle était encore utilisée ailleurs sur le site.
La méthodologie BEM, pour Bloc, Élément, Modificateur, existe justement pour résoudre ce type de problème sur des projets CSS à plusieurs mains, bien avant l’apparition d’Elementor. Son application à un projet Elementor demande simplement d’adapter la convention aux endroits où Elementor permet d’ajouter des classes personnalisées, principalement dans l’onglet Avancé de chaque widget.
Le principe BEM en trois niveaux
Un nom de classe BEM se structure toujours de la même façon : le Bloc désigne un composant autonome (carte-tarif), l’Élément désigne une partie de ce bloc, séparée par un double underscore (carte-tarif__titre), et le Modificateur désigne une variante, séparée par un double tiret (carte-tarif--mise-en-avant). Cette structure rend immédiatement lisible, à la seule lecture du nom, la relation hiérarchique entre les classes sans avoir à ouvrir le fichier CSS pour comprendre le contexte.
Application concrète dans Elementor
Sur un widget Container représentant une carte de tarification, la classe CSS personnalisée carte-tarif est ajoutée dans l’onglet Avancé, section CSS Classes du container racine. Chaque widget enfant reçoit ensuite sa propre classe BEM dérivée : carte-tarif__titre sur le widget Heading, carte-tarif__prix sur le widget contenant le montant, carte-tarif__bouton sur le widget Button.
.carte-tarif {
border-radius: 8px;
padding: 24px;
}
.carte-tarif__titre {
font-size: 20px;
font-weight: 700;
}
.carte-tarif__prix {
font-size: 32px;
color: var(--e-global-color-primary);
}
.carte-tarif--mise-en-avant {
border: 2px solid var(--e-global-color-secondary);
}Ce que cette convention résout concrètement
Avant l’adoption de cette convention, un développeur qui ajoutait un style à .titre risquait d’affecter silencieusement tous les autres titres du site portant la même classe générique, ailleurs dans une section totalement différente. Avec BEM, la classe carte-tarif__titre ne peut par construction s’appliquer qu’au titre de ce bloc précis, réduisant drastiquement le risque de collision entre les styles de deux sections différentes du même site.
Les pièges observés lors de l’adoption
- Certains développeurs continuaient d’ajouter des classes génériques par habitude, en particulier sous la pression d’un délai serré, ce qui a nécessité une relecture systématique du CSS personnalisé avant chaque mise en production
- Le nommage des Modificateurs prêtait parfois à confusion quand plusieurs variantes se cumulaient sur un même bloc, une situation que BEM gère mal nativement et qui a demandé une règle d’équipe simple : un seul modificateur actif à la fois par bloc
- La documentation de la convention, écrite dans le wiki interne de l’agence, s’est révélée indispensable pour les nouveaux arrivants sur le projet, une simple convention orale ne suffisant jamais à long terme
| Élément BEM | Séparateur | Exemple |
|---|---|---|
| Bloc | Aucun | carte-tarif |
| Élément | Double underscore | carte-tarif__titre |
| Modificateur | Double tiret | carte-tarif--mise-en-avant |
Une convention de nommage CSS ne sert à rien si elle reste dans la tête d’une seule personne de l’équipe : documentez-la dans un endroit que chaque développeur consultera avant sa première contribution au projet, pas après.
En résumé
Adopter BEM pour le CSS personnalisé d’un projet Elementor à plusieurs développeurs réduit sensiblement les conflits de style silencieux et rend le code nettement plus lisible pour quiconque reprend une section du site des mois plus tard. Cette méthodologie ne demande aucune extension supplémentaire, elle repose uniquement sur la discipline de nommage appliquée dans le champ CSS Classes déjà natif de chaque widget Elementor, à condition qu’elle soit documentée et suivie par toute l’équipe.
