SlideShare une entreprise Scribd logo
BEMBEM
vos CSS sous vitamines !vos CSS sous vitamines !
Thomas ZILLIOX -Thomas ZILLIOX - @iamtzi@iamtzi -- http://tzi.fr/http://tzi.fr/..
Sommaire
BEM améliore votre HTML1.
BEM améliore vos CSS2.
Essayez BEM dès lundi3.
Les petites astuces4.
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
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
BEM est une convention de nommage
B -> Block
E -> Element
M -> Modifier
block-name [ __element-name ] [ --modifier-name ]
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
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
1. BEM améliore votre HTML
Quels sont les intérêts ?
Meilleure communication
Isole les styles en composants
Augmente la réutilisabilité
Sommaire
BEM améliore votre HTML1.
BEM améliore vos CSS2.
Essayez BEM dès lundi3.
Les petites astuces4.
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
 Pas de balise
 Pas d'id
 Pas d'opérateur
 Pas de pseudo-classe de descendance
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
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
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
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
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
Sommaire
BEM améliore votre HTML1.
BEM améliore vos CSS2.
Essayez BEM dès lundi3.
Les petites astuces4.
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
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
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
Sommaire
BEM améliore votre HTML1.
BEM améliore vos CSS2.
Essayez BEM dès lundi3.
Les petites astuces4.
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
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
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"
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
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
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
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.
 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/..

Contenu connexe

En vedette

Siren button - Phone based Emergency Alert System
Siren button - Phone based Emergency Alert SystemSiren button - Phone based Emergency Alert System
Siren button - Phone based Emergency Alert System
Vasudev Jagarlamudi
 
Smart Button Overview
Smart Button OverviewSmart Button Overview
Smart Button Overview
guest78316a
 
Smart Button Background
Smart Button BackgroundSmart Button Background
Smart Button Background
trevore2000
 
Monbaby - sleep sensor in a smart button
Monbaby - sleep sensor in a smart buttonMonbaby - sleep sensor in a smart button
Monbaby - sleep sensor in a smart button
Arturas Vaitaitis
 
#CES2015 HUBREPORT : UNVEILED + DAY1
#CES2015 HUBREPORT : UNVEILED + DAY1#CES2015 HUBREPORT : UNVEILED + DAY1
#CES2015 HUBREPORT : UNVEILED + DAY1
HUB INSTITUTE
 
Objets connectés:panorama international des initiatives bancaires - INBanque ...
Objets connectés:panorama international des initiatives bancaires - INBanque ...Objets connectés:panorama international des initiatives bancaires - INBanque ...
Objets connectés:panorama international des initiatives bancaires - INBanque ...
YVON MOYSAN
 
Bluetooth LE Button
Bluetooth LE ButtonBluetooth LE Button
Bluetooth LE Button
dongbuluo
 
A Presentation on Automatic conveyor belt system
A Presentation on Automatic conveyor belt systemA Presentation on Automatic conveyor belt system
A Presentation on Automatic conveyor belt system
DHRUVIT KHARADI
 
TV Connectée
TV ConnectéeTV Connectée
TV Connectée
Dagobert
 
Les Barbares Attaquent l'Énergie ! Par Oussama Ammar
Les Barbares Attaquent l'Énergie ! Par Oussama AmmarLes Barbares Attaquent l'Énergie ! Par Oussama Ammar
Les Barbares Attaquent l'Énergie ! Par Oussama Ammar
TheFamily
 
Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...
Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...
Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...
TheFamily
 
La maison intelligente (Sébastien Bergin)
La maison intelligente (Sébastien Bergin)La maison intelligente (Sébastien Bergin)
La maison intelligente (Sébastien Bergin)
Genève Lab
 
WHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBi
WHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBiWHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBi
WHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBi
DigitasLBi Paris
 

En vedette (13)

Siren button - Phone based Emergency Alert System
Siren button - Phone based Emergency Alert SystemSiren button - Phone based Emergency Alert System
Siren button - Phone based Emergency Alert System
 
Smart Button Overview
Smart Button OverviewSmart Button Overview
Smart Button Overview
 
Smart Button Background
Smart Button BackgroundSmart Button Background
Smart Button Background
 
Monbaby - sleep sensor in a smart button
Monbaby - sleep sensor in a smart buttonMonbaby - sleep sensor in a smart button
Monbaby - sleep sensor in a smart button
 
#CES2015 HUBREPORT : UNVEILED + DAY1
#CES2015 HUBREPORT : UNVEILED + DAY1#CES2015 HUBREPORT : UNVEILED + DAY1
#CES2015 HUBREPORT : UNVEILED + DAY1
 
Objets connectés:panorama international des initiatives bancaires - INBanque ...
Objets connectés:panorama international des initiatives bancaires - INBanque ...Objets connectés:panorama international des initiatives bancaires - INBanque ...
Objets connectés:panorama international des initiatives bancaires - INBanque ...
 
Bluetooth LE Button
Bluetooth LE ButtonBluetooth LE Button
Bluetooth LE Button
 
A Presentation on Automatic conveyor belt system
A Presentation on Automatic conveyor belt systemA Presentation on Automatic conveyor belt system
A Presentation on Automatic conveyor belt system
 
TV Connectée
TV ConnectéeTV Connectée
TV Connectée
 
Les Barbares Attaquent l'Énergie ! Par Oussama Ammar
Les Barbares Attaquent l'Énergie ! Par Oussama AmmarLes Barbares Attaquent l'Énergie ! Par Oussama Ammar
Les Barbares Attaquent l'Énergie ! Par Oussama Ammar
 
Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...
Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...
Les Barbares Attaquent l'Education ! Par Oussama Ammar, co-fondateur de TheFa...
 
La maison intelligente (Sébastien Bergin)
La maison intelligente (Sébastien Bergin)La maison intelligente (Sébastien Bergin)
La maison intelligente (Sébastien Bergin)
 
WHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBi
WHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBiWHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBi
WHAT'S NEXT...OBJETS CONNECTÉS par DigitasLBi
 

Similaire à BEM, vos CSS sous vitamines !

html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
RihabBENLAMINE
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
Daniel Roch - SeoMix
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
adeljaouadi
 
Référencement avancé de WordPress : structure en silos et maillage interne
Référencement avancé de WordPress : structure en silos et maillage interneRéférencement avancé de WordPress : structure en silos et maillage interne
Référencement avancé de WordPress : structure en silos et maillage interne
Daniel Roch - SeoMix
 
Pimp your css
Pimp your cssPimp your css
Pimp your css
gabriel vieira
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
kitsformation
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
IbrahimaBarry49
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
IZZA Samir
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
jQuery mobile [Part1]
jQuery mobile [Part1]jQuery mobile [Part1]
jQuery mobile [Part1]
Mohamed Tahar ZWAWA
 
Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
CSS 3
CSS 3CSS 3
Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5
Com'3elles - www.com3elles.com
 
Les règles de développement Angular
Les règles de développement AngularLes règles de développement Angular
Les règles de développement Angular
Héla Ben Khalfallah
 
Formation joomla 2eme_session
Formation joomla 2eme_sessionFormation joomla 2eme_session
Formation joomla 2eme_session
Ahmed Seye
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
Dagbouj Hatem
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
Mohammed Amine Mostefai
 

Similaire à BEM, vos CSS sous vitamines ! (20)

html-css-casuhal.pdf
html-css-casuhal.pdfhtml-css-casuhal.pdf
html-css-casuhal.pdf
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Les défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEOLes défauts de WordPress pour le SEO
Les défauts de WordPress pour le SEO
 
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdfCSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
CSS%2B-%2BNiv2%2B-%2BExercices%2Bsuppl%25C3%25A9mentaires (3).pdf
 
Référencement avancé de WordPress : structure en silos et maillage interne
Référencement avancé de WordPress : structure en silos et maillage interneRéférencement avancé de WordPress : structure en silos et maillage interne
Référencement avancé de WordPress : structure en silos et maillage interne
 
Pimp your css
Pimp your cssPimp your css
Pimp your css
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Developpement Web.pptx
Developpement Web.pptxDeveloppement Web.pptx
Developpement Web.pptx
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
jQuery mobile [Part1]
jQuery mobile [Part1]jQuery mobile [Part1]
jQuery mobile [Part1]
 
Cours html5
Cours html5Cours html5
Cours html5
 
CSS 3
CSS 3CSS 3
CSS 3
 
Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5Créer un template pour Joomla 2.5
Créer un template pour Joomla 2.5
 
Les règles de développement Angular
Les règles de développement AngularLes règles de développement Angular
Les règles de développement Angular
 
Formation joomla 2eme_session
Formation joomla 2eme_sessionFormation joomla 2eme_session
Formation joomla 2eme_session
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
 

BEM, vos CSS sous vitamines !

  • 1. BEMBEM vos CSS sous vitamines !vos CSS sous vitamines ! Thomas ZILLIOX -Thomas ZILLIOX - @iamtzi@iamtzi -- http://tzi.fr/http://tzi.fr/..
  • 2. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  • 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. 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. BEM est une convention de nommage
  • 6. B -> Block E -> Element M -> Modifier
  • 7. block-name [ __element-name ] [ --modifier-name ]
  • 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. 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. 1. BEM améliore votre HTML Quels sont les intérêts ? Meilleure communication Isole les styles en composants Augmente la réutilisabilité
  • 11. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  • 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.  Pas de balise  Pas d'id  Pas d'opérateur  Pas de pseudo-classe de descendance
  • 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. 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. 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. 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. 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. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  • 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. 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. 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. Sommaire BEM améliore votre HTML1. BEM améliore vos CSS2. Essayez BEM dès lundi3. Les petites astuces4.
  • 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. 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. 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. 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. 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. 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. 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.  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/..