BEM vos CSS sous vitamines !

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

À 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>

À 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 (= 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">

À 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>

Quels sont les intérêts ?

• Meilleure communication
• Isole les styles en composants
• Augmente la réutilisabilité

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

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

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;
}

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>

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

<button class="button">
<a class="button">
<input class="button">

.button {
    background: tomato;
}

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;
}

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 }

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

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>

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>

B. Essayer !

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

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

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

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"

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"

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

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

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