Sauvez votre CSS avec BEM et Sass

Par Alan Pilloud
Publié le 26 décembre 2016

Quoi de pire qu’un fichier styles.css de milliers de lignes contenant des règles qui devraient être groupées, mais qu’on retrouve éparpillées ?

Rien.

Ou peut-être le même fichier avec des règles nommées #a, .b pour faire court.

Ouch !

C’est le scénario catastrophe. Ce genre de projets sont peu utilisables, n’inspirent pas la confiance, ne sont pas évolutifs et j’en passe.

C’est grâce à une méthodologie facile à mettre en oeuvre que je m’assure de la maintenabilité d’un projet.

C’est ce que je souhaite partager avec vous aujourd’hui.

BEM, le sauveur de votre CSS

BEM est un méthodologie d’écriture de CSS. Elle a été inventée par Yandex, le moteur de recherche numéro 1 en Russie.

Et c’est du costaud !

Cette méthodologie offre les bénéfices suivants:

  • maintenabilité des styles sur le long terme
  • ajout de nouvelles règles sans effet de bord
  • auto-documentation

Magnifique n’est-ce pas ?

BEM, qui signifie Block Element Modifier se présente comme suit :

.author__portrait--small {
    /* nos déclarations */
}

author est le Block, portrait est l’Element et small est le Modifier.

Le Block est le nom du composant.
L’Element est le nom d’un élément au sein du composant.
Le Modififier est une variante appliquée à un Element ou un Block.

L’Element étant toujours précédé par deux sous-tirets et le Modifier étant toujours précédé par deux tirets.

Pourquoi pas un seul délimiteur ?

Cela permet d’écrire des noms un peu plus compliqués.
Par exemple .main-menu__link.

Attention, on ne peut pas écrire de sous éléments Vous devez vous interdire des règles comme .author__header__portrait.

BEM en action

Imaginons maintenant que nous devions écrire la CSS d’une fiche d’auteur.
Il contient le nom de l’auteur, son portrait et une biographie.

Voici ce que pourrait donner le style de notre fiche d’auteur:

.author {
    /* nos déclarations */
}
.author__name {
    /* nos déclarations */
}
.author__biography {
    /* nos déclarations */
}
.author__portrait {
    /* nos déclarations */
}
.author__portrait--small {
    /* nos déclarations */
}

Et ce que cela donnerait en HTML:

<div class="author">
    <div class="author__portrait author__portrait--small"></div>
    <div class="author__name"></div>
    <div class="author__biography"></div>
</div>

La classe de variation appliquée au portrait accompagne la classe de base.

Cela permet d’écrire une CSS très complète pour le style de base et de ne spécifier que les changements dans le style de variation.

Par exemple:

.author__portrait {
    width: 60px;
    height: 60px;
    border: 2px solid #e5e5e5;
    float: left;
    /* etc. */
}
.author__portrait--small {
    width: 40px;
    height: 40px;
}

Grâce à cet exemple simple, on constate que BEM tient ses promesses.

Bingo !

Simplement en regardant les noms de classes, on comprend ce que à quoi on à affaire et le contexte. Le code est donc auto-documenté.

Grâce aux Blocks, on sait que .author__name n’a absolument rien à voir avec .product__name par exemple.

On ne peut pas réutiliser du code pour l’appliquer à un autre élément.
Ca n’a pas de sens d’appliquer .author__portrait à un logo dans une barre d’entête sous prétexte qu’ils partagent les mêmes styles.

On est absolument sûr de ce qu’on modifie et sans effets de bord.

C’est aussi ce qui rend un style exploitable sur le long terme.

De plus, on garde la complexité des styles au plus bas puisqu’on ne cascade pas et qu’on n’utilise que des classes.

La grande classe pour debugger !

En appliquant cette méthodologie, on a déjà résolu 100% du problème. Il ne reste plus qu’à napper le tout d’un bon glaçage grâce à Sass.

Je structure mes projet avec Sass, ils gagnent en lisibilité.

Sass est un language qui est interprété en CSS.

Il permet entre autres de définir des variables, écrire des fonctions, d’importer des feuilles de styles, etc.
On passe le tout dans un générateur et ça crache du CSS.

C’est grâce à cet outil que je structure mes projets.

Nous n’irons pas en détail dans l’installation de Sass et de son paramètrage. Ecrivez-moi si vous souhaitez en savoir plus sur ma méthode.

Grâce à Sass, on va pouvoir créer un fichier par composant et l’importer dans une feuille générale.
Cela rend les composants réutilisables et le projet entier est structuré.

Si je reprend l’exemple de la fiche d’auteur, on pourra l’écrire ainsi:

// _author.scss
.author {
    // nos déclarations

    &__name {
        // nos déclarations
    }
    &__biography {
        // nos déclarations
    }
    &__portrait {
        // nos déclarations

        &--small {
            // nos déclarations
        }
    }
}

Le code n’est pas plus court.

Alors quel est l’avantage ?

Ce que je recherche ici, c’est la lisibilité. Raccourcir, c’est le travail du générateur qui vous compresse le tout.

Grâce à l’indentation, on reconnait l’appartenance d’un Element au Block en étant visuellement déchargé de répétitions du nom du Block.

En plus, si on doit renommer un Block ou un Element qui contient des Modifiers, cela va un peu plus vite.

Il ne reste plus qu’à créer la feuile de style finale :

// styles.scss

@import "variables";
@import "author";
@import "header";
@import "footer";
// etc.

Et voila, c’est prêt à l’emploi.

Pourquoi est-ce un big WIN pour moi ?

Cela fait maintenant un peu plus d’une année que j’ai adopté cette méthodologie dans mes projets.

Je n’ai jamais été déçu.

Je peux réutiliser avec aisance un style entier d’un projet à l’autre. Je copie mon fichier .scss, j’importe et c’est fait.

Je ne perds pas de temps à naviguer dans un unique fichier CSS de milliers de lignes aux noms de règle à dormir debout.

En conclusion, que ce soit avec BEM et Sass ou n’importe quoi d’autre, l’important est d’assurer les trois points que sont la pérénité, la confiance et la compréhension du projet.

Envie d'en parler ?

Ecrivez un email ou DM sur twitter