Combien de fois un développeur s’est retrouvé sur un projet avec des CSS énormes et mal structurées ? Il essaie de modifier quelques styles et finit par casser un autre élément, le temps presse, et il n’a pas le temps de regarder dans un millier de lignes de codes.
Il s’en veut, il rougit et croise les doigts pour que personne ne remarque les !important; dans ses commits, avant de pouvoir se pencher sur un autre problème.

Pourquoi une méthodologie ?

Rien n’est plus compliqué en informatique que de nommer des objets. Il faut réussir à être succinct, explicite, pas trop générique, pas trop compliqué, tout en restant compréhensible.
Si une autre personne lit votre code, elle doit directement comprendre à quoi servent tels ou tels éléments. Il est très important que le code soit clair, parce que cette personne peut très bien être vous dans quelques mois.

Qu’est-ce que BEM ?

BEM est une méthodologie de développement d’interface élaborée par Yandex, le moteur de recherche russe.
En plus d’apporter une convention de nommage des sélecteurs CSS, elle permet facilement de structurer / décrire l’interface d’un projet.

BEM est l’acronyme de Block, Element, Modifier, et toute la méthodologie du nommage à la manière BEM tient dans ces trois mots.
Sa force ? Les composants d’une interface peuvent toujours être rangés dans une arborescence de blocs, d’éléments et de modifiers.

Le Bloc

C’est un composant parent contenant un ou plusieurs éléments.
Il est entièrement indépendant, et lorsque pris hors contexte d’une page spécifique, garde du sens. Les Blocs peuvent être utilisés et réutilisés n’importe où et même dans un autre projet.
Certains blocs peuvent être imbriqués dans d’autres blocs, combinés ou utilisés pour créer d’autres blocs plus complexes.

• Exemple : un header, un footer, une sidebar.

L’Element

Est une partie constitutive d’un bloc. Il faut considérer un élément comme l’enfant d’un bloc, il ne peut être utilisé en dehors de celui-ci et n’a d’existence que dans le cadre de son parent.

• Exemple : le lien d’une navigation, le logo d’un header, l’input d’un bloc.

Le Modifier

Il introduit une notion de comportement. Il se modifie en fonction d’un contexte précis, ou encore d’une action de la part de l’utilisateur. Le Modifier peut aussi bien être appliqué à un Bloc qu’à un Elément.

• Exemple : un fond de couleur différent pour une section spécifique, un élément rendu visible après un clic de l’utilisateur.

Les règles du jeux

La méthodologie BEM est basée sur trois règles essentielles :

1. Les blocs et les éléments doivent chacun avoir un nom unique, lequel sera utilisé comme classe CSS, il ne faut donc pas utiliser d’ID, chaque bloc, est un module / une brique de l’interface, et par définition il peut être instancié plusieurs fois. Les ID ne doivent servir que d’ancre.
2. Les sélecteurs CSS ne doivent pas utiliser les noms des éléments HTML
3. Les cascades dans les sélecteurs CSS sont à éviter ( = ne pas nester)

Les règles impliquent de préfixer les noms des éléments par leur contexte.

Convention de nommage

Il existe plusieurs conventions de nommage, mais celle que nous utiliserons pour les exemples sera la convension pseudo officielle, à base d’underscores : https://en.bem.info/methodology/naming-convention/

(Piqûre de rappel PostCSS : il existe un plugin pour gérer la syntaxe BEM, sa configuration permet de générer les mêmes conventions de nommage pour tous les développeurs).

Le nom de chaque entité peut comporter des tirets –
Les éléments sont préfixés de deux underscores __
les modifiers sont préfixés d’un underscore _

.block-name
.block-name_modifier-name
.block-name__element-name
.block-name__element-name_modifier-name

Un exemple pour bien comprendre

Pourquoi utiliser BEM ?

• L’utilisation de nom « parlant » permet d’auto-documenter le code, de mieux le maintenir, ce qui simplifie le travail en équipe

• L’architecture par composants : un bloc peut être placé n’importe où et être instancié plusieurs fois. Les règles CSS étant radicalement séparées de celles des autres blocs, il est possible de construire des applications géantes tout en travaillant toujours à une échelle réduite : le contexte d’un bloc

• La performance : les navigateurs rangent les classes CSS dans une table de hachage globale au document, il serait trop coûteux de créer des sous-tables pour les descendants au niveau de chaque élément HTML. Les cascades CSS, lorsqu’elles sont nombreuses, engendrent des problèmes de fluidité. En limitant drastiquement l’usage des cascades, on élabore des feuilles de styles performantes.

Penser à long terme, c’est penser BEM

Cela peut paraître rébarbatif et inhabituel à cause des noms de classes particulièrement longs et de la nécessité de nommer les classes pour pratiquement toutes les balises. Mais cette possibilité de travailler efficacement et en douceur sur de grands projets évolutifs et d’écrire un code élégant, propre et facilement maintenable vaut la peine de commencer à travailler avec la méthodologie BEM.

Chez Adfab, on l’utilise tous les jours, et les CSS nous disent merci.