BEM, vos CSS sous vitamines !

2,879 views
2,879 views

Published on

Présentation donnée lors de la KiwiParty 2014 pour sensibiliser aux avantages de la notation BEM en CSS.

Vous ne connaissez pas BEM ? Pas de soucis ! Cette présentation commencera par une présentation des principes et ce que ça peut vous apporter. Nous découvrirons aussi comment le mettre en place sur vos projets et quelques petites astuces pour vous simplifier la vie ;)

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,879
On SlideShare
0
From Embeds
0
Number of Embeds
541
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

BEM, vos CSS sous vitamines !

  1. 1. BEMBEM vos CSS sous vitamines !vos CSS sous vitamines ! Thomas ZILLIOX -Thomas ZILLIOX - @iamtzi@iamtzi -- http://tzi.fr/http://tzi.fr/..
  2. 2. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  3. 3. 1. BEM améliore votre HTML À la recherche de classes autonomes. My title some content Action title some button section class article h3 h3 div class action-zone h4 class important button class title p p h4 class title important button div section
  4. 4. 1. BEM améliore votre HTML À la recherche de classes autonomes et explicites. My title some content Action title some button section class article h3 h3 div class action-zone h4 class button-important button class article-title p p h4 class action-zone-title title-important button div section
  5. 5. BEM est une convention de nommage
  6. 6. B -> Block E -> Element M -> Modifier
  7. 7. block-name [ __element-name ] [ --modifier-name ]
  8. 8. 1. BEM améliore votre HTML BEM est une convention de nommage. B -> Block (= component ou module) E -> Element M -> Modifier b em class menu b em class menu__tab b em class menu__tab menu__tab--current b em class menu menu--active
  9. 9. 1. BEM améliore votre HTML À la recherche de classes autonomes et explicites. My title some content Action title some button section class article h3 h3 div class action-zone h4 class button button--important button class article__title p p h4 class action-zone__title action-zone__title--important button div section
  10. 10. 1. BEM améliore votre HTML Quels sont les intérêts ? Meilleure communication Isole les styles en composants Augmente la réutilisabilité
  11. 11. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  12. 12. 2. BEM améliore vos CSS Une règle : les sélecteurs CSS peuvent être composés : 1 sélecteur de classe (et pas plus) Pseudo-classes d'état Pseudo-élements
  13. 13.  Pas de balise  Pas d'id  Pas d'opérateur  Pas de pseudo-classe de descendance
  14. 14. 2. BEM améliore vos CSS A. Pour éviter les fuites My title 20px section class article h3 h3 div class action-zone h4 .article .title margin-top class title class title
  15. 15. 2. BEM améliore vos CSS B. Pour être séparé du markup (évolution) My title 0 My title section class article h3 h3 .article__title:first-child margin-top section class article h3 class article__title div img style float:left; classh3 article__title div
  16. 16. 2. BEM améliore vos CSS C. Pour être séparé du markup (a11y) tomato button class button class .button a button input class button background
  17. 17. 2. BEM améliore vos CSS D. Pour être séparé du markup (SEO) 2em h1 class article__title .article__title font-size h2 class article__title div class article__title
  18. 18. 2. BEM améliore vos CSS E. Un poids constant, facilement surchargeable. transparent grey tomato #663399 /* normalize.css */ a background /* button.css */ .button background /* theme/button.css */ .button--important background .button--important background
  19. 19. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  20. 20. 3. Essayez BEM dès lundi A. S'habituer aux classes précises. My title some content Action title some button section class article h3 h3 div class action-zone h4 class important button class title p p h4 class title important button div section
  21. 21. 3. Essayez BEM dès lundi A. S'habituer aux classes précises. Ce n'est pas sale ;) My title some content Action title some button section class article h3 h3 div class action-zone h4 class button button--important button class article__title p p h4 class action-zone__title action-zone__title--important button div section
  22. 22. 3. Essayez BEM dès lundi B. Essayer ! Essayez avec 1 composant Pas besoin de migrer tout le existant Pas besoin d'attendre un nouveau projet
  23. 23. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  24. 24. 4. Les petites astuces A. BEM peut être sémantique, ou non #663399 #663399 #663399 /* CSS ZEN : Classe sémantique fonctionnel */ .button--submit-contact-form background /* Bootstrap : Classe sémantique visuelle */ .button--primary background /* OOCSS : Classe visuelle */ .button--purple background
  25. 25. Les petites astuces B. BEM peut prendre d'autres formes BEM peut prendre de nombreuses formes. Voir "Fifty Shades of BEM" — @kaelig .block-name__element-name--modifier-name .blockName_elementName-modifierName .blockName-elementName--modifierName .org-BlockName-elementName--modifierName
  26. 26. Les petites astuces C. Vous pouvez utiliser BEM partout Même si ce n'est pas un composant réutilisable.  Je l'utilise d'ailleurs pour mes noms de fichiers : "Facture__EDF--2014-06.pdf"
  27. 27. Les petites astuces D. Il n'y a qu'un seul élément par sélecteur  Pas de "menu__list__tab__link__label" nav class menu ul class menu__tab-list li class menu__tab a class menu__tab-link span class menu__tab-label
  28. 28. Les petites astuces E. Les blocks peuvent se chevaucher nav class menu ul class menu__list li class menu__item tab a class tab__link span class tab__label
  29. 29. Les petites astuces F. Avec un préprocesseur La syntaxe suivante est valide avec Sass 3.3 et Less :  Avec un fichier par composant, c'est très facile à ranger .block &__element &__element--modifier
  30. 30. Conclusion BEM est une convention partagée1. BEM améliore la lisibilité de votre HTML2. BEM améliore la maintenabilité, la réutilisabilité, la pérennité de vos styles3. BEM n'est pas contraignant4. BEM est l'ami des préprocesseur5. BEM est un premier pas dans le web component6.
  31. 31.  MerciMerci Retrouvez ces slides surRetrouvez ces slides sur http://tzi.fr/talk/KiwiParty2014http://tzi.fr/talk/KiwiParty2014 Thomas ZILLIOX -Thomas ZILLIOX - @iamtzi@iamtzi -- http://tzi.fr/http://tzi.fr/..

×