BEM vos CSS sous vitamines !


Thomas ZILLIOX - @iamtzi - http://tzi.fr/.

Sommaire

  1. BEM améliore votre HTML
  2. BEM améliore vos CSS
  3. Essayez BEM dès lundi
  4. Les petites astuces

1. BEM améliore votre HTML

À la recherche de classes autonomes.

<section class="article">
    <h3 class="title">My title</h3>
    <p>some content</p>

    <div class="action-zone">
        <h4 class="title important">
            Action title
        </h4>
        <button class="important">some button</button>
    </div>
</section>

1. BEM améliore votre HTML

À la recherche de classes autonomes et explicites.

<section class="article">
    <h3 class="article-title">My title</h3>
    <p>some content</p>

    <div class="action-zone">
        <h4 class="action-zone-title title-important">
            Action title
        </h4>
        <button class="button-important">some button</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.

<section class="article">
    <h3 class="article__title">My title</h3>
    <p>some content</p>

    <div class="action-zone">
        <h4 class="action-zone__title action-zone__title--important">
            Action title
        </h4>
        <button class="button button--important">some button</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

  1. BEM améliore votre HTML
  2. BEM améliore vos CSS
  3. Essayez BEM dès lundi
  4. 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

<section class="article">
    <h3 class="title">My title</h3>

    <div class="action-zone">
        <h4 class="title">
.article .title {
    margin-top: 20px;
}

2. BEM améliore vos CSS

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

<section class="article">
    <h3 class="article__title">My title</h3>
</div>
.article__title:first-child {
    margin-top: 0;
}
<section class="article">
    <img style="float:left;" />
    <h3 class="article__title">My title</h3>
</div>

2. BEM améliore vos CSS

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

<button class="button">
<a class="button">
<input class="button">
.button {
    background: tomato;
}

2. BEM améliore vos CSS

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

<h1 class="article__title">
<h2 class="article__title">
<div class="article__title">
.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 }
.button--important { background: tomato }

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

Sommaire

  1. BEM améliore votre HTML
  2. BEM améliore vos CSS
  3. Essayez BEM dès lundi
  4. Les petites astuces

3. Essayez BEM dès lundi

A. S'habituer aux classes précises.

<section class="article">
    <h3 class="title">My title</h3>
    <p>some content</p>

    <div class="action-zone">
        <h4 class="title important">
            Action title
        </h4>
        <button class="important">some button</button>
    </div>
</section>

3. Essayez BEM dès lundi

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

<section class="article">
    <h3 class="article__title">My title</h3>
    <p>some content</p>

    <div class="action-zone">
        <h4 class="action-zone__title action-zone__title--important">
            Action title
        </h4>
        <button class="button button--important">some button</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

  1. BEM améliore votre HTML
  2. BEM améliore vos CSS
  3. Essayez BEM dès lundi
  4. 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 }

/* OOCSS : 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

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

<nav class="menu">
    <ul class="menu__tab-list">
        <li class="menu__tab">
            <a class="menu__tab-link">
                <span class="menu__tab-label">

Pas de "menu__list__tab__link__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 :

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

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

Conclusion

  1. BEM est une convention partagée
  2. BEM améliore la lisibilité de votre HTML
  3. BEM améliore la maintenabilité, la réutilisabilité, la pérennité de vos styles
  4. BEM n'est pas contraignant
  5. BEM est l'ami des préprocesseur
  6. BEM est un premier pas dans le web component

Merci

Retrouvez ces slides sur http://tzi.fr/talk/KiwiParty2014

Thomas ZILLIOX - @iamtzi - http://tzi.fr/.