N’ayez pas peur, le BEM et le SMACSS ne sont pas de nouveaux langages à apprendre dans le domaine du développement web & mobile, 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.
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.
Un bloc, comme son nom l’indique, est un conteneur d’informations dans votre site web. Dans notre cas ::
Dans l’exemple ci-dessus, il s’agit du .menu qui va contenir plusieurs é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 à :
Dans l’exemple, on a des items du menu représentés par la classe .menu__item
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 à :
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 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.
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.
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.
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-« .
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.
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 trouveront leur place, et nulle part ailleurs.
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, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »