BEM, une méthodologie pour mieux structurer son DOM

Partager

Article mis à jour le 8 juillet 2022 | Publié le 3 décembre 2018

Comment rendre son code moins indigeste et plus efficace ?
C’est une réalité à laquelle nous sommes souvent confrontés. Heureusement, des solutions ont été trouvées pour faciliter le travail collaboratif.
Aujourd’hui nous allons parler méthodologie et cela à l’aide de la convention de nommage Blocks Elements Modifiers (BEM), qui vous aidera à mieux organiser et structurer votre CSS.

Une méthodologie pour gagner du temps

Vous êtes tout à fait libre de nommer vos classes selon vos envies !
BEM est en réalité une préconisation, il s’agit d’une méthode pour aider les développeurs front-end à trouver des intitulés plus parlant et plus efficaces.
Vous pouvez alors créer votre propre charte de nommage.
Cela permet ainsi :

 Des sélecteurs génériques pour être plus efficace

Revenons à l’essentiel et donc au principe du CSS.
Le CSS vous permet de gérer la mise en page séparément de votre HTML, qui lui, contient la structure et le contenu de votre page.
Il est donc possible en scindant ces deux éléments, d’intégrer du contenu (en HTML) sans même devoir lui définir des propriétés stylistiques.
C’est sur cette notion que s’applique le BEM !
Cette convention de nommage vise à utiliser des classes CSS génériques nommées en fonction de leurs apparences et non de leurs sémantiques.
Je m’explique, en CSS il est possible d’attribuer des valeurs à un élément HTML de trois manières différentes :

C’est avec les sélecteurs CSS de type classe que le BEM fonctionne.
Bien sûr, le principe de cascade du CSS étant, les déclarations peuvent hériter les unes des autres.

3 types de mots à choisir bien soigneusement

Attention, on ne parle pas ici des propriétés Block et Inline des objets HTML, mais l’image est similaire.
L’idée est de créer trois types de mots qui représenteront chacun un entonnoir pour concaténer vos intitulés.
Le schéma BEM modèle à employer sera celui-ci :.block-element_modifier{}Tout d’abord, il faut définir un bloc qui sera le premier item de votre trio de mots constituant votre intitulé de classe.
Un bloc est le composant parent d’un ensemble d’éléments.
Vous pouvez décider de définir votre bloc en fonction :

Vous pouvez ensuite définir les noms associés aux éléments qui composent ce bloc. Ces noms seront utilisés dans la seconde partie de notre classe.
Notons qu’il ne peut y avoir d’éléments si il n’y a pas de bloc.
Les modificateurs quant à eux sont facultatifs et doivent apporter une modification mineure à des propriétés déjà existantes. Ils sont utilisés le plus souvent pour retranscrire visuellement un changement d’état (actif / inactif, ouvert / fermés)

Une règle de syntaxe à respecter

Le nom des blocs doivent toujours êtres uniques, de même que ceux des éléments qui le composent afin d’éviter des conflits de sélecteurs.
Il convient de toujours nommer une classe en commençant par un block..block{}

Lorsque l’on nomme un élément enfant on le concatène au bloc à l’aide d’un tiret .block-element{}

Pour finir, les modifiers s’imbriquent en utilisant un underscore..block-element_modifier{}Par exemple, si l’on sait que l’on aura besoin d’utiliser plusieurs types de boutons cliquables , variables en fonction de leurs tailles, couleurs, etc… on peut créer un block dédié à cet objet. .bouton {
display: inline-flex;
align-item: center;
padding: 10px 14px;
border : 1px solid redcaptainamerica;
background-color: bluecaptainamerica;
font-size: 16px;
}
.bouton-icon{
flex: 0 0 20px;
height: 20px;
border-radius: 50%;
}
.bouton-label{
flex: 1;
}
.bouton-label_disabled{
acity: 0.5;
background-color: blackvador;
border-color: greydeathstart;
}
Pour rappel :
L’objet HTML à traiter dans ce cas sera la balise <a>, seulement on choisira un intitulé de class lié à sa fonctionnalité et non en fonction de son objet HTML.
Le nom du bloc à choisir est donc .bouton.
Notons qu’un bouton peut contenir des icônes et des intitulés ( dans l’exemple label ).
C’est la raison pour laquelle ces elements enfants ont été rajoutés.Voilà une manière de nommer ses classes de façon organisé.
Bien-sûr chacun a sa propre manière de faire !
Il existe d’ailleurs d’autres convention de nommage, chacune dédiées à des langages différents.

Vous serez peut-être aussi intéressé par ces articles

Vignette Dot Js pour blog Numendo

Dans un précédent article sur ReactEurope nous vous disions qu’il n’y a pas qu’aux États-Unis qu’il y a des supers conférences : nous...

Pourquoi utiliser TypeScript pour vos projets ?

C’est le langage sur lequel miser en ce moment ! Créé par Microsoft en 2012 dans le but d’améliorer et de sécuriser le développement en...

Au premier coup d’œil, on pourrait croire à une réponse d’Ionic à React Native, mais cette fois-ci, le framework dédié aux applications...

Ce site web stocke des données telles que les cookies pour activer les fonctionnalités nécessaires du site, y compris l'analyse. Vous pouvez modifier ces paramètres à tout moment ou accepter les paramètres par défaut.
Préférences en matière de dépôt de données

Lorsque vous visitez des sites Web, ils peuvent stocker ou récupérer des données dans votre navigateur. Ce stockage est souvent nécessaire pour la fonctionnalité de base du site Web.
L’analyse peut être utilisée comme stockage. La confidentialité est importante pour nous, vous avez donc la possibilité de désactiver ce type de stockage qui n’est pas être nécessaire pour le fonctionnement de base du site Web. Le blocage de l’analyse peut avoir un impact sur votre expérience sur le site Web.

Nous utilisons des cookies pour personnaliser votre expérience sur Numendo.