Réorganisez votre CSS avec le BEM et SMACSS

N’ayez pas peur, le BEM et le SMACSS ne sont pas de nouveaux langages à apprendre, mais une manière de travailler et d’organiser son code CSS. On le sait, tous le CSS n’est pas une science exacte et nous ne l’avons pas tous appris de la même manière. Dans cet article, nous allons voir comment mieux travailler avec ce langage avec ces 2 conventions.

Le BEM

BEM signifie Block Element Modifier. Il permet d’organiser vos classes CSS en modules indépendants. Il y a quelques variantes de la syntaxe à adopter mais la plus courante ressemble à ceci :

On remarque différents niveaux : les blocs, les éléments et les modificateurs.

Pour illustrer ces niveaux, prenons l’exemple d’une page contenant un formulaire de contact, un menu de navigation et une searchbox.

Les blocs

Un bloc, comme son nom l’indique, est un conteneur d’informations dans votre site web. Dans notre cas ::

• Le formulaire de contact
• Le menu
• La searchbox

Dans l’exemple ci-dessus, il s’agit du .menu qui va contenir plusieurs éléments.

Les éléments

Un élément est un composant du bloc. Ce dernier contient plusieurs éléments ayant plusieurs fonctions. Pour déclarer un élément en respectant la syntaxe BEM, on le fait précéder du nom du parent suivi de 2 underscores « _ ».

Dans notre exemple, les éléments correspondent donc à :

• Un champ à remplir
• Un item d’un menu
• Un bouton de recherche d’une searchbox

Dans l’exemple, on a des items du menu représentés par la classe .menu__item

Les modificateurs

Un modificateur est, comme son nom l’indique, une classe permettant de représenter une variation d’un bloc. On peut donc l’ajouter en complément de la classe originale dans le code HTML. Pour déclarer un modificateur en respectant la syntaxe BEM, on le fait précéder du nom du parent suivi de 2 tirets »–.

Dans notre exemple, les modificateurs correspondent donc à :

• Le formulaire minifié (en cachant les labels par exemple)
• Le menu adapté pour le footer
• Le champs à remplir avec un bouton spécifique

Dans l’exemple, on a un modificateur du bloc menu pour le footer ; il s’agit de la classe .menu–footer

Pour plus d’informations, rendez vous sur la page dédiée bem info.

SMACSS

SMACSS veut dire Scalable and Modular Architecture for CSS. C’est une méthode de travail définie par Jonathan Snoovk qui a d’ailleurs écrit un livre à ce sujet, que je vous invite vivement à lire à cette adresse.

Ce n’est pas un livre à suivre à la lettre. Vous pouvez le lire partiellement et y piquer les méthodes de travail qui vous conviennent le mieux, ou bien le lire en entier.

La catégorisation définie par SMACSS se découpe en 5 types de catégories.

1. Base
2. Layout
3. Module
4. State
5. Theme

Catégoriser les différentes règles CSS permet de distinguer les différents types de classes et de définir un ensemble de bonnes pratiques pour chacun d’eux.

Peu importe le framework CSS que vous utilisez, vous pouvez créer 5 dossiers pour pouvoir séparer les règles afin de mieux vous y retrouver. Catégoriser les règles permet de distinguer des modèles types et de définir des bonnes pratiques pour chacune de ces catégories.

Base

Dans ce dossier on retrouvera toutes les règles de base. Généralement, il ne s’agit pas de définitions de règles pour des classes ou des ids, mais bien de définitions de règles pour les différentes balises que vous utiliserez.

J’ai pour habitude de mettre les resets CSS dans ce dossier.

Layout

Dans ce dossier on définira les règles concernant l’architecture de votre site web. Il s’agit en fait des sections majeures que vous retrouverez sur votre site web.

Voici un exemple donné par Jonathan Snook :

Attention à ne pas confondre les layouts et les modules. Les modules ne sont que les sections mineures contenues dans les layouts. Un layout peut contenir plusieurs modules. Enfin, pour faciliter la lecture et l’appropriation du code, il est préférable de préfixer les règles par « l-« .

Module

Un module, comme dit précédemment, est une section mineure de la page. C’est ici que je définis généralement le fameux menu du site avec ses variantes.  Lorsque vous définissez un module, il faut qu’il soit modulable et portable dans n’importe quelle autre partie du site sans poser de problèmes d’affichage.

State

Il s’agit des classes que vous allez définir pour définir l’état d’un bouton par exemple. Ces classes sont généralement ajoutées par le JavaScript pour que l’utilisateur puisse changer l’apparence d’un élément. Dans l’exemple de notre page formulaire, les states seraient donc des modificateurs permettant à un élément de s’afficher différemment.

C’est ici que les fameux !important trouveront leur place, et nulle part ailleurs.

Theme

Cette dernière partie permet de définir des classes pour définir un thème. J’ai pour habitude de créer une classe que j’applique au body pour pouvoir sélectionner les enfants de la classe. Il me sera alors beaucoup plus facile de créer un autre thème sur le même modèle.

Si vous utilisez un framework tel que SASS, par exemple, vous pouvez définir des variables de couleurs qui seront utilisées dans votre style.

Voilà donc pour cette petite présentation de BEM et SMACSS. Je vous invite tout de même à lire le livre de Jonathan Snoovk à ce sujet. Vous pouvez adopter ces conventions ou pas. Elles servent à travailler de manière plus organisée et vous pouvez les appliquer totalement ou partiellement. Bien sûr, cela dépend aussi de la nature de votre projet.

Si cet article vous a plu je vous invite à télécharger notre livre blanc « Les 11 commandements d’un site qui convertit vos visiteurs en clients » et à contacter notre agence web.