La syntaxe BEM, pour “Block Element Modifier”, est une convention de nommage CSS qui permet de structurer, hiérachiser implicitement les éléments nommés.
Je l’ai découverte il y a quelques mois maintenant – à travers un plugin CSS, et j’avoue que j’ai été charmé tout de suite par le concept, sans toutefois m’y intéresser plus avant. L’ayant recroisé à plusieurs reprises depuis, je me suis finalement décidé à regarder d’un peu plus près les avantages qu’on peut retirer d’une syntaxe comme celle-là par rapport aux syntaxes qu’on croise habituellement.
Comment écrire une règle CSS avec la syntaxe BEM ?
C’est très simple et ça se résume en 3 exemples, pour Block, Element et Modifier :
.block {}
.block__element {}
.block--modifier {}
.block est l’élément principal, le parent du composant formé par l’ensemble des éléments.
.block__element est un élément enfant du parent. Il fait partie de .block, et peut hériter de ses propriétés.
.block–modifier est un autre état de .block.
Sur un modèle objet sémantique, cela pourrait donner ceci :
.voiture {}
.voiture__roue {}
.voiture__carroserie {}
.voiture__moteur {}
.voiture--occasion {}
.voiture--neuve {}
Et un exemple d’intégration concret donnerait ceci :
.header {}
.header__logo {}
.header__slogan {}
.header__menu {}
.header__menu--mobile {}
Avantages et inconvénients
Les tirets et underscores doublés, auxquels s’ajoute l’héritage des élements, confèrent un côté un peu lourd à la syntaxe. C’est l’inconvénient majeur.
Cela dit, conceptuellement, on peut très bien utiliser la même syntaxe sans doubler les caractères de séparation.
Par ailleurs, en un coup d’oeil, il est possible de savoir comment les éléments sont hiérachisés, structurés et éventuellement déclinés, et cela uniquement par le nom utilisé. Et quand on voit qu’on peut utiliser BEM sémantiquement mais aussi visuellement, on se dit qu’on a tout gagné. Conjointement, cela permet d’avoir des classes plus modulaires et moins disparates, ce qui permet d’améliorer le code HTML et CSS, bien que ça alourdisse un peu le fichier CSS. Enfin, la syntaxe BEM ne pose aucun problème d’utilisation avec un préprocesseur, et ça aussi c’est intéressant.
Je ne l’utilise pas (encore) dans mes développements, mais il est certain que ça ne saurait tarder et que cela fera partie de ma todolist CSS pour 2015.
En complément d’information, voilà le slider BEM, vos CSS sous vitamines ! édité par Thomas Zilliox sur SlideShare, c’est assez intéressant donc je l’intègre directement ici.
Voilà également la documentation officielle. Enfin, de manière générale, si vous êtes au fait des conventions de nommage en CSS je vous conseille l’excellent Guide des feuilles de styles CSS, conseils et bonnes pratiques, de David Leuliette.
Ce n’est pas obligatoire de doubler les guillemets et les underscores, l’important est plutôt d’appliquer le concept, qui est intéressant …