HAKUROU L'amour est dans le code

Le CSS avec BEM

Le CSS avec BEM

Un collègue m'a fait découvrir une façon intéressante d'écrire son CSS de façon plus lisible; rapide tour de découverte de BEM.   

Je ne sais pas pour vous mais pour moi, en CSS je ne me suis jamais trop cassé la tête a nommer mes classes, c'était certes parlant mais sans plus, quant à la réutilisabilité on peut repasser.

BEM est une notation développée par Yandex et répond à des besoins tels que la généricité, maintenance des feuilles de styles ou encore si un nouveau protagoniste entre dans le projet, l'assimilation est rapidement faite.

La notation repose sur trois choses, Block, Element et Modifier.

 

L'écriture

Tout d'abord, dans les bonnes pratiques, il faut savoir que lorsque l'on nomme ses classes, il faut utiliser des tirets:

.maClasse{} /* Pas bien */

.ma_classe{} /* Pas bien */

.ma-classe{} /* Bien */

 

C'est important car dans BEM les tirets et underscore ont des valeurs propres.

Une simple classe composée de groupe de mots peut être formée avec les tirets:

.menu{}
.main-menu{}
.main-sub-menu{}

 

Dans l'exemple ci-dessus, main-menu constitue un "block". On peut voir un block comme un objet composé de multiple éléments, comme un menu, un article, un footer, etc...

Dès lors, un block peut donc posséder un élément, la notation pour une telle dépendance est un double underscore:

.main-menu__item{}

 

On peut identifier facilement l'élément que l'on cherche à styliser en un clin d'oeil.

L'altération ou la variation est représentée par un "Modifier", écrit avec un double tiret:

.main-menu__item--selected{}

 

Conclusion

Rien qu'avec ces 3 nommages, on peut rendre clair et lisible une feuille de style sans devoir chercher dans le HTML l'élément correspondant, tout parle de lui même.
Le prix à payer pour l'utiliser est d'avoir un code plus verbeux et à ralonge. Le confort nécessite bien quelques sacrifices !

 

Références

http://guidecss.fr/convention.html

http://ronanlevesque.fr/articles/css-notation-bem/