CSS et notation BEM

Un des gros points noirs du CSS est la complexité que sa maintenance peut parfois engendrer. Cela s’avère surtout vrai pour de gros sites, pour lesquels éditer un simple style peut vite tourner au cauchemar, au risque de casser entièrement votre mise en page. C’est là que des concepts tels que BEM interviennent…


Le principe

BEM est une méthodologie mise au point par Yandex. “BEM” signifie Block, Element, Modifier. l’idée derrière cette méthodologie est de faciliter la lecture (et la ré-usabilité) du code par d’autres développeurs. BEM met l’accent sur la relation qui existe entre différents blocs et éléments. La convention de nommage que j’utilise est la suivante :

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

La notation originale proposée par Yandex était différente, mais je préfère celle-ci (utilisée par Harry Roberts) :

  • .block sera le niveau le plus haut d'un composant ou d'un module
  • .block__element sera un élément appartenant à .block
  • .block--modifier sera une version différente de .block

Comme je le disais, l’idée est de concrétiser la relation qui va exister entre différents éléments. Prenons l’exemple d’un bloc d’informations contenant un titre, une image présentant différentes variations de style et un paragraphe de texte. Avec BEM, cela va donner :

.bloc-infos
.bloc-infos__titre
.bloc-infos__img
.bloc-infos__img--var-1
.bloc-infos__img--var-2
.bloc-infos__texte

Ici il est facile d’interpréter que .bloc-infos__titre, .bloc-infos__img et .bloc-infos__texte sont des éléments descendants de .bloc-infos et que .bloc-infos__img--var-1 et .bloc-infos__img--var-2 sont des variations de .bloc-infos__img. Rien qu’en changeant le nommage des classes, les relations entre les différents éléments sont maintenant évidentes.

Les éventuelles limites de BEM

Un code "moche"

Un argument récurrent semble être qu’utiliser cette notation va produire un code inesthétique. Mais comme le dit très justement Harry Roberts dans son article explicatif EN :

J’affirme que que si vous fuyez le code basé simplement sur son apparence, alors vous ratez souvent l’essentiel.

En effet, le code produit sera plus bizarre que d’habitude, mais cela parait négligeable au vu des bénéfices qu’il apporte.

Une complexité inutile

Il peut paraître bien fastidieux de nommer l’ensemble de nos éléments HTML selon cette méthode, créant ainsi une complexité qui n’est pas forcément nécessaire. En fait, c’est à chaque personne d’ajuster sa notation en fonction de sa propre logique. Par exemple, certains éléments appartenant à un bloc n’en seront pas dépendants, la notation BEM ne sera donc pas nécessaire pour eux.

Conclusion

BEM est un outil de notation extrêmement utile, favorisant la ré-usabilité et la clarté du code, avec peu ou pas d’inconvénients. Pour l’instant, je ne l’ai testé que sur de petits projets, mais il ne fait aucun doute qu’il montrera tout son potentiel sur un projet de grande envergure.


Cet article a été fortement influencé par l'article de Harry Roberts intitulé MindBEMding – getting your head 'round BEM syntax EN, si vous êtes un peu anglophone je conseille vivement sa lecture.