Discussion :

[amoiraud]

Bonjour à tous,

Je suis en train d'essayer de mettre en place la convention BEM (Blocks - Elements - Modifier) dans mon entreprise afin d'uniformiser le CSS de nos projets.

Vu que je ne connais pas bien cette convention j'ai une question qui peux paraitre bête mais dont j'aimerai avoir l'avis de ceux qui utilisent BEM :
Lorsque j'ai un block, dans un autre block, etc... sur plusieurs niveaux, comment ça se passe ?

Exemple : J'ai un header, cet header contient un menu, ce menu contient des items, ces items contiennent une image et un span.

Est-ce que les éléments de mon item doivent être nommés comme ceci :
.header-menu-item__image et .header-menu-item__span ? Ou ai-je mal compris ?

De plus, au cas ou je sois sur l'item actif de mon menu, est ce que chaque élément de mon item doit avoir le modifier : .header-menu-item__image--active et .header-menu-item__span--active ?

Merci d'avance pour vos éclaircissements

[Doksuri]

salut, nous avion aussi essaye la methode BEM, mais n'avons jamais reussi a l'exploiter correctement...
a force d'optims, je suis tombe sur ce developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations
alors certes ils preconisent d'utiliser un BEM-like, mais qu'il est tout aussi bien, juste de reduire le niveau de complexite des selecteurs ainsi que la profondeur du selecteur

TL;DR
Reduce the complexity of your selectors; use a class-centric methodology like BEM.
Reduce the number of elements on which style calculation must be calculated.

(ma traduction)
reduire la complexite des selecteurs; utiliser une "calss-centric" methode comme BEM
reduire le nombre d'elements sur lequel le calcul du style se fait

If you’re looking for a good way to organize your CSS, BEM is a really good starting point, both from a structure point-of-view, but also because of the simplifications of style lookup.

If you don’t like BEM, there are other ways to approach your CSS, but the performance considerations should be assessed alongside the ergonomics of the approach.

(ma traduction)
si vous cherchez une bonne methode pour organiser votre CSS, BEM est un bon debut aussi bien pour la structure, mais aussi pour la simplification du style
si vous n'aimez pas BEM, il y a d'autres approches pour votre CSS, mais les performances doivent etre prise en consideration

=> perso, on a opte pour une approche de 2 de profondeur max pour les selecteurs, et ca semble correspondre a notre equipe. de meme on a essaye de faire que des selecteurs simples (quitte a rajouter 1 classe en JS quand necessaire)

[amoiraud]

Salut,

Merci pour ton retour d’expérience, je pense qu'on va aussi faire une sorte de BEM-like à notre sauce, mais comme je compte présenter le concept à l'équipe j'aimerais être carré sur la présentation de la convention BEM pour qu'on réfléchisse ensemble à comment on va mettre ça en place chez nous (le 2 de profondeurs max me parait tout à fait pertinent, mais on va en débattre entre nous)

[NoSmoking]

Bonjour,
si cela peut aider : Apprendre les bonnes pratiques en CSS : BEM et OOCSS.

[amoiraud]

Bonjour,

Article très intéressant, merci