bem, vos css sous vitamines !
DESCRIPTION
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 ;)TRANSCRIPT
![Page 1: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/1.jpg)
BEMBEMvos CSS sous vitamines !vos CSS sous vitamines !
Thomas ZILLIOX - Thomas ZILLIOX - @iamtzi@iamtzi - - http://tzi.fr/http://tzi.fr/..
![Page 2: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/2.jpg)
SommaireBEM améliore votre HTML1.BEM améliore vos CSS2.Essayez BEM dès lundi3.Les petites astuces4.
![Page 3: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/3.jpg)
1. BEM améliore votre HTMLÀ la recherche de classes autonomes.
My title some content
Action title some button
section class articleh3 h3
div class action-zone
h4class important button
class titlep p
h4 class title important
buttondiv
section
![Page 4: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/4.jpg)
1. BEM améliore votre HTMLÀ la recherche de classes autonomes et explicites.
My title some content
Action title some button
section class articleh3 h3
div class action-zone
h4class button-important button
class article-titlep p
h4 class action-zone-title title-important
buttondiv
section
![Page 5: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/5.jpg)
BEM est une convention de nommage
![Page 6: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/6.jpg)
B -> BlockE -> ElementM -> Modifier
![Page 7: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/7.jpg)
block-name [ __element-name ] [ --modifier-name ]
![Page 8: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/8.jpg)
1. BEM améliore votre HTMLBEM est une convention de nommage.
B -> Block (= component ou module)E -> ElementM -> Modifier
b em class menub em class menu__tabb em class menu__tab menu__tab--currentb em class menu menu--active
![Page 9: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/9.jpg)
1. BEM améliore votre HTMLÀ la recherche de classes autonomes et explicites.
My title some content
Action title some button
section class articleh3 h3
div class action-zone
h4class button button--important button
class article__titlep p
h4 class action-zone__title action-zone__title--important
buttondiv
section
![Page 10: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/10.jpg)
1. BEM améliore votre HTMLQuels sont les intérêts ?
Meilleure communicationIsole les styles en composantsAugmente la réutilisabilité
![Page 11: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/11.jpg)
SommaireBEM améliore votre HTML1.BEM améliore vos CSS2.Essayez BEM dès lundi3.Les petites astuces4.
![Page 12: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/12.jpg)
2. BEM améliore vos CSSUne règle : les sélecteurs CSS peuvent être composés :
1 sélecteur de classe (et pas plus)Pseudo-classes d'étatPseudo-élements
![Page 13: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/13.jpg)
Pas de balise Pas d'id Pas d'opérateur Pas de pseudo-classe de descendance
![Page 14: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/14.jpg)
2. BEM améliore vos CSSA. Pour éviter les fuites
My title
20px
section class articleh3 h3
div class action-zoneh4
.article .title margin-top
class title
class title
![Page 15: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/15.jpg)
2. BEM améliore vos CSSB. Pour être séparé du markup (évolution)
My title
0
My title
section class articleh3 h3
.article__title:first-child margin-top
section class article
h3
class article__titlediv
img style float:left;classh3 article__title
div
![Page 16: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/16.jpg)
2. BEM améliore vos CSSC. Pour être séparé du markup (a11y)
tomato
button class buttonclass
.button
a buttoninput class button
background
![Page 17: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/17.jpg)
2. BEM améliore vos CSSD. Pour être séparé du markup (SEO)
2em
h1 class article__title
.article__title font-size
h2 class article__titlediv class article__title
![Page 18: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/18.jpg)
2. BEM améliore vos CSSE. 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
![Page 19: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/19.jpg)
SommaireBEM améliore votre HTML1.BEM améliore vos CSS2.Essayez BEM dès lundi3.Les petites astuces4.
![Page 20: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/20.jpg)
3. Essayez BEM dès lundiA. S'habituer aux classes précises.
My title some content
Action title some button
section class articleh3 h3
div class action-zone
h4class important button
class titlep p
h4 class title important
buttondiv
section
![Page 21: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/21.jpg)
3. Essayez BEM dès lundiA. S'habituer aux classes précises. Ce n'est pas sale ;)
My title some content
Action title some button
section class articleh3 h3
div class action-zone
h4class button button--important button
class article__titlep p
h4 class action-zone__title action-zone__title--important
buttondiv
section
![Page 22: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/22.jpg)
3. Essayez BEM dès lundiB. Essayer !
Essayez avec 1 composantPas besoin de migrer tout le existantPas besoin d'attendre un nouveau projet
![Page 23: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/23.jpg)
SommaireBEM améliore votre HTML1.BEM améliore vos CSS2.Essayez BEM dès lundi3.Les petites astuces4.
![Page 24: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/24.jpg)
4. Les petites astucesA. 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
![Page 25: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/25.jpg)
Les petites astucesB. 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
![Page 26: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/26.jpg)
Les petites astucesC. 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"
![Page 27: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/27.jpg)
Les petites astucesD. Il n'y a qu'un seul élément par sélecteur
Pas de "menu__list__tab__link__label"
nav class menuul class menu__tab-list
li class menu__taba class menu__tab-link
span class menu__tab-label
![Page 28: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/28.jpg)
Les petites astucesE. Les blocks peuvent se chevaucher
nav class menuul class menu__list
li class menu__item taba class tab__link
span class tab__label
![Page 29: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/29.jpg)
Les petites astucesF. 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
![Page 30: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/30.jpg)
ConclusionBEM 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.
![Page 31: BEM, vos CSS sous vitamines !](https://reader033.vdocuments.site/reader033/viewer/2022052218/5586ea57d8b42a04138b470f/html5/thumbnails/31.jpg)
Merci Merci
Retrouvez ces slides sur Retrouvez ces slides sur http://tzi.fr/talk/KiwiParty2014http://tzi.fr/talk/KiwiParty2014
Thomas ZILLIOX - Thomas ZILLIOX - @iamtzi@iamtzi - - http://tzi.fr/http://tzi.fr/..