BEM, une méthodologie pour mieux structurer son DOM

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 :

• d’éviter des conflits de nommage
• de réduire les déclarations inutiles qui en écrasent d’autres
• d’éviter des cascades inutiles
• une meilleure appropriation du code par un tiers
• une intégration en HTML sans modifier le CSS

 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 :

• soit en définissant toutes les occurrences de l’objet sélectionné
  • qui permet de travailler par parentalité ( tous les <li> qui sont dans le <nav>)
• soit en attribuant un ID unique à un objet
• ou encore en créant une classe qui affectera seulement les objets auxquels elle est attribuée

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 :

• du nombre de fois où vous allez appeler cet objet
• sa capacité à être le plus générique possible

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.