Donnez du sens à vos noms de classes CSS avec

La notation BEM

Qui suis-je ?

Thomas ZILLIOX, développeur web freelance sur Lyon.

Spécialisé dans l'industrialisation du CSS :
Formation, conseil, mise en place d'outils et de bonnes pratiques.
Développe aussi en JS & PHP ;
Blog (rarement) sur mon site tzi.fr ;
Tweete (plus souvent) sur @iamtzi.

Revoir cette présentation en ligne git.io/BEM.

Sommaire

BEM améliore votre HTML
BEM améliore vos CSS
Essayez BEM dès lundi
Les petites astuces

1. BEM améliore votre HTML

À la recherche de classes autonomes.


                    
                        How to start with BEM?
                        Thomas.
                    
                        
                            Thanks for sharing!
                            A nice visitor.

1. BEM améliore votre HTML

À la recherche de classes autonomes et explicites.


                    
                        How to start with BEM?
                        Thomas.

                        
                            Thanks for sharing!
                            A nice visitor.

BEM est une convention de nommage

B → Block
E → Element
M → Modifier

block-name [ __element-name ] [ --modifier-name ]

1. BEM améliore votre HTML

B → Block (component ou module)

E → Element

M → Modifier

1. BEM améliore votre HTML

À la recherche de classes autonomes et explicites.


                    
                        How to start with BEM?
                        Thomas.

                        
                            Thanks for sharing!
                            A nice visitor.

1. BEM améliore votre HTML

Meilleure lisibilité de l'HTML
Styles prédictibles
Notion explicite de composants et de réutilisablité

Sommaire

BEM améliore votre HTML
BEM améliore vos CSS
Essayez BEM dès lundi
Les petites astuces

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


                    
                        How to start with BEM?


                    .article .title {
                        margin-top: 20px;
                    }

2. BEM améliore vos CSS

A. Pour éviter les fuites


                    
                        How to start with BEM?

                        
                            Thanks for sharing!


                    .article .title {
                        margin-top: 20px;
                    }

2. BEM améliore vos CSS

A. Pour éviter les fuites


                    
                        How to start with BEM?

                        
                            Thanks for sharing!


                    .article__title {
                        margin-top: 20px;
                    }

2. BEM améliore vos CSS

B. Pour être séparé du markup (évolution)


                    
                        How to start with BEM?


                    .article__title:first-child {
                        margin-top: 0;
                    }

2. BEM améliore vos CSS

B. Pour être séparé du markup (évolution)


                    
                        
                        How to start with BEM?


                    .article__title:first-child {
                        margin-top: 0;
                    }

2. BEM améliore vos CSS

B. Pour être séparé du markup (évolution)


                    
                        
                        How to start with BEM?


                    .article__title--main {
                        margin-top: 0;
                    }

2. BEM améliore vos CSS

C. Pour être séparé du markup (a11y)


                    button {
                        background: #663399;
                    }

2. BEM améliore vos CSS

C. Pour être séparé du markup (a11y)


                    button,
                    a.button,
                    input[type="button"] {
                        background: #663399;
                    }

2. BEM améliore vos CSS

C. Pour être séparé du markup (a11y)


                    .button {
                        background: #663399;
                    }

2. BEM améliore vos CSS

D. Pour être séparé du markup (SEO)


                    .article h1 {
                        font-size: 2em;
                    }

2. BEM améliore vos CSS

D. Pour être séparé du markup (SEO)


                    .article h1,
                    .article .h1-like {
                        font-size: 2em;
                    }

2. BEM améliore vos CSS

D. Pour être séparé du markup (SEO)


                    .article__title {
                        font-size: 2em;
                    }

2. BEM améliore vos CSS

E. Un poids constant, facilement surchargeable.


                    /* normalize.css */
                    a { background: transparent }

                    /* button.css */
                    .button { background: grey }
                    #header .button { background: tomato }

                    /* theme/button.css */
                    .button.main { background: #663399 }

2. BEM améliore vos CSS

E. Un poids constant, facilement surchargeable.


                    /* normalize.css */
                    a { background: transparent }

                    /* button.css */
                    .button { background: grey }
                    .button--header { background: tomato }
                    
                    /* theme/button.css */
                    .button--main { background: #663399 }

2. BEM améliore vos CSS

Meilleure lisibilité des CSS
Sélecteurs plus simples et plus maintenables
Découple le CSS et l'architecture HTML

Sommaire

BEM améliore votre HTML
BEM améliore vos CSS
Essayez BEM dès lundi
Les petites astuces

3. Essayez BEM dès lundi

A. S'habituer aux classes précises.


                    
                        How to start with BEM?
                        Thomas.

                        
                            Thanks for sharing!
                            A nice visitor.

3. Essayez BEM dès lundi

A. S'habituer aux classes précises. Ce n'est pas sale ;)


                    
                        How to start with BEM?
                        Thomas.

                        
                            Thanks for sharing!
                            A nice visitor.

3. Essayez BEM dès lundi

Essayez avec 1 composant
Pas besoin de migrer tout l'existant
Pas besoin d'attendre un nouveau projet

Sommaire

BEM améliore votre HTML
BEM améliore vos CSS
Essayez BEM dès lundi
Les petites astuces

4. Les petites astuces

A. BEM peut être sémantique, ou non


                    /* CSS ZEN : Classe sémantique fonctionnel */
                    .button--submit-contact-form { background: #663399 }
                    
                    /* Bootstrap : Classe sémantique visuelle */
                    .button--primary { background: #663399 }
                    
                    /* Atomic : Classe visuelle */
                    .button--purple { background: #663399 }

Les petites astuces

B. BEM peut prendre d'autres formes


                    .block-name__element-name--modifier-name { }
                    .blockName_elementName-modifierName { }
                    .blockName-elementName--modifierName { }
                    .org-BlockName-elementName--modifierName { }

BEM peut prendre de nombreuses formes.
Voir "Fifty Shades of BEM" — @kaelig

Les petites astuces

B. BEM peut prendre d'autres formes


                    .mug-article__title--main{ }

Utilisez un préfixe d'organisation pour initier la migration.
Et ainsi différencier les éléments réutilisabls des autres.

Les petites astuces

C. Vous pouvez utiliser BEM partout

C'est une manière de donner du sens à une chaîne de caractères simple.

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__item__link__label"

Les petites astuces

E. Les blocks peuvent se chevaucher

Les petites astuces

F. Avec un préprocesseur

La syntaxe suivante est valide avec Sass 3.3 et Less :


                    .block {
                        &__element {
                        }
                        &__element--modifier {
                        }
                    }

Avec un fichier par composant, c'est très facile à ranger

Conclusion

BEM est...

une convention partagée
très flexible
bon pour la lisibilité de votre HTML
bon pour la maintenabilité de vos CSS
bon pour la réutilisabilité de vos CSS
l'ami des préprocesseur
un premier pas dans le web component

Merci

Des questions, des retours ?

Revoir cette présentation en ligne git.io/BEM.