La méthodologie BEM

Ou comment organiser correctement son CSS lorsqu’on travaille en équipe ? Un point crucial, que nous vous développons ci-dessous.

Même si le CSS n’est pas un language difficile à prendre en main, il est parfois compliqué de maintenir un code compréhensible et performant sur le long terme ou sur de larges projets en collaboration avec un ou plusieurs développeurs.

C’est à ce moment là que la méthodologie BEM devient intéressante.

Qu’est-ce que le BEM ?

BEM est l’acronyme de Block Element Modifier. C’est une approche modulaire du développement web qui consiste à diviser une interface en plusieurs blocs indépendants. Cette convention de nommage peut être appliquée aux classes CSS, ce qui permet d’avoir un code plus lisible et mieux organisé en suivant quelques règles simples.

L’objectif est que d’autres développeurs puissent facilement comprendre la structure d’un composant à la seule lecture du nom des classes. Cela n’a jamais été facile de nommer ses classes en CSS et c’est encore plus compliqué pour un autre développeur de comprendre ce qu’elles font.

Block

block représente l’élément principal. C’est le composant parent d’un ou plusieurs éléments. (Exemple : header, nav, footer, etc.)

.block {}

Element

element est un enfant de block. (Exemple : un item de navigation, un titre, un paragraphe, etc.) Toutes les classes commencent par le nom du composant principal block suivi par 2 underscores et le nom de l’élément.

.block__element {}

Modifier

modifier représente un état ou version différente de block ou element. (Exemple : l’état actif d’un élément ou un changement de couleur d’un élément sur une page spécifique). Il est délimité par 2 traits d’unions.

.block--modifier {}
.block__element--modifier {}

En pratique

La méthodologie BEM est intéressante pour structurer ces fichiers CSS, mais pas seulement. Là où l’on retrouve vraiment son pouvoir, c’est dans l’HTML. Rien qu’en lisant les différentes classes, on comprend directement la structure d’un composant et la relation qu’ont les classes entre elles.

Prenons l’exemple d’un composant de navigation avec plusieurs items, dont un qui sera stylisé différemment avec une classe active.

HTML

Nous pouvons clairement voir les classes qui sont liées au block parent .nav et celles qui ne le sont pas.

En préfixant les éléments avec le nom du block parent, je sais que .nav__item fait partie du composant .nav et ne peut pas être utilisé en dehors de ce block. Je peux donc modifier son style en ayant la certitude de ne pas modifier d’autres éléments qui seraient ailleurs dans le code. Ce qui ne serait pas le cas si je décide de modifier la classe .link, qui est une classe plus globale et qui pourrait se trouver également dans un autre composant.

Performance

La méthodologie BEM n’a pas uniquement un impact sur l’organisation et la lisibilité du code, mais également sur la performance du site et le temps d’affichage d’une page. Avec la puissance des navigateurs d’aujourd’hui ce n’est plus qu’un petit détail, mais il est important de comprendre le fonctionnement.

Pour l’exemple, reprenons notre navigation. Si je souhaite styliser les items de navigation, j’aurais pu l’écrire comme ceci :

nav ul li {}

Ce qui, pour des soucis de performance et de flexibilité, est à éviter au maximum. Plus un sélecteur est long (niveau de ciblage), plus le navigateur mettra du temps à trouver les éléments dans le DOM. Un navigateur lit les classes CSS de la droite (enfant) vers la gauche (parent).

Dans ce cas il va :

• chercher tous les li qui sont dans le DOM
• ensuite il va vérifier si ces li sont dans unul
• pour enfin voir si ce ul est dans un élément de type nav

Ceci n’est donc pas une bonne façon de procéder. Sur des projets plus larges, cela aura un impact sur le temps d’affichage.

La meilleure approche est donc d’utiliser une méthodologie comme BEM, qui permet de cibler directement l’élément, tout en sachant visuellement que cet élément se trouve dans le composant .nav.

.nav__item {}

Conclusion

La méthodologie BEM donne au code CSS une structure solide qui reste simple et compréhensible.

Le style CSS d’un élément restera toujours au sein d’un composant et ne dépendra jamais d’un autre élément du site. On ne rencontrera donc jamais de problème de cascade en CSS.

Créer des composants indépendants et les réutiliser intelligemment réduit la quantité de code CSS. Un code qui sera donc plus facile à maintenir sur le long terme ou sur de larges projets. En structurant correctement ses fichiers, on peut créer des bibliothèques de composants pour les réutiliser et même les importer dans d’autres projets.

Sources

CSS Guidelines