BEM, CSS component friendly ?

1. www.sooyoos.comjeudi 23 juin 2016
jeudi 23 juin 2016
SOOYOOS

2. www.sooyoos.comjeudi 23 juin 2016 2
CSS component friendly ?

3. www.sooyoos.comjeudi 23 juin 2016
• Solution élaborée par Yandex et publiée en 2010
• Convention de nommage des classes CSS
• Il faut voir le site comme une arborescence de blocs, d'éléments et de modificateurs
3

4. www.sooyoos.comjeudi 23 juin 2016
• Entité indépendante,
• « Brique » de l'application ou de la page Web.
• Un bloc forme son propre contexte autonome
4

5. www.sooyoos.comjeudi 23 juin 2016
• Un bloc est réutilisable dans d'autres blocs ou dans des éléments.
• Ne connaît toutefois que son propre contexte et non celui du parent.
• N’est pas livré avec les règles CSS de son propre positionnement au sein du conteneur parent.
5

6. www.sooyoos.comjeudi 23 juin 2016
• Une partie d'un bloc.
• Le contexte d'un élément est celui du bloc.
6

7. www.sooyoos.comjeudi 23 juin 2016
• Propriété qui sert à créer des variantes/modifications minimes. Par exemple : changer des couleurs
• Modificateurs de blocs
• Modificateurs d'éléments
7

8. www.sooyoos.comjeudi 23 juin 2016
Les blocs et les éléments doivent chacun avoir un nom unique, lequel sera utilisé comme classe CSS ;
/! pas d’ID, l’objectif étant de pouvoir réutiliser les blocks /!
Les sélecteurs CSS ne doivent pas utiliser les noms des éléments HTML (pas de .menu td) ;
Les cascades dans les sélecteurs CSS devraient être évitées.
8

9. www.sooyoos.comjeudi 23 juin 2016
• Seuls comptent les concepts, la syntaxe reste libre.
• L'équipe de BEM utilise une syntaxe à base de underscores :
blockName
blockName--modifierName
blockName__elementName
blockName__elementName—modifierName
Deviens
9

10. www.sooyoos.comjeudi 23 juin 2016 10

11. www.sooyoos.comjeudi 23 juin 2016
• Ici, un autre concept à noter, l’utilisation de namespaces
11

12. www.sooyoos.comjeudi 23 juin 2016
＼
12

13. www.sooyoos.comjeudi 23 juin 2016 13
• En CSS, seul le premier niveau de sélection est performant.
• Les cascades CSS, lorsqu'elles sont nombreuses, engendrent des problèmes de fluidité surtout sur les
pages animées des applications Web.
• CF : règle 3 => réduire la cascade

14. www.sooyoos.comjeudi 23 juin 2016 14
• Un bloc peut être placé n'importe où dans la page et apparaître plusieurs fois.
• Pourquoi ? Les règles CSS sont radicalement séparées de celles des autres blocs.
• On travaille toujours à une échelle réduite : le contexte d'un bloc.

15. www.sooyoos.comjeudi 23 juin 2016 15
• Composants Web = briques des futures applications JavaScript.
• Embarque ses propres règles CSS et son propre code JavaScript.
• La norme prévoit un shadow DOM, une sandbox qui encapsule une portion de DOM dans le but
d'empêcher les sélecteurs CSS et les identifiants HTML d'interagir par erreur avec le reste du DOM.
• Les blocs BEM correspondent bien à la philosophie du développement par composants.

16. www.sooyoos.comjeudi 23 juin 2016 16
• Syntaxe un peu lourde, peu devenir verbeuse si mal utilisée
• Penser composant c’est bien, encore faut-il que la création s’y prête

17. www.sooyoos.comjeudi 23 juin 2016 17
• http://www.alsacreations.com/article/lire/1641-bonnes-pratiques-en-css-bem-et-oocss.html
• http://putaindecode.io/fr/articles/css/bem/
• https://en.bem.info/methodology/key-concepts/
• https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-
how-to-avoid-them/
• http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/