Nommage et architecture CSS

A ma connaissance, il n’y a rien de plus casse-tête côté front que de trouver la bonne structure et le nommage correct pour assurer une maintenabilité et une lisibilité optimales de mes CSS. Certaines méthodologies, comme BEM ou SUIT, permettent cependant de faciliter ça. Je vais décrire ici la façon dont j’ai adapté ces techniques à mon workflow.

Les bases : BEM et SUIT

Si ces deux acronymes ne vous évoquent rien, je vous suggère avant toute chose de lire mon article sur le premier ainsi que la documentation Github du deuxième.

J’ai pour ma part commencé par utiliser BEM de manière traditionnelle avant d’y incorporer une part de SUIT, ce qui me donnait quelque chose de ce genre :

.Component {
}

.Component-element {
}

.Component--modifier {
}

Je préfère cette syntaxe par rapport au BEM classique, où l’utilisation des _ ne facilite pas vraiment l’édition du nom des classes.

Pousser plus loin le concept des Modifiers

Le souci avec les Modifiers, c’est qu’ils créent des classes à rallonge, par exemple :

<button class="Button Button--small Button--green Button--caps">Texte</button>

J’ai récemment vu passer un article d’Envato dans lequel était décrit le principe des Chainable Modifiers, principe qu’ils ont mis en place pour Envato Market.

En se basant sur cette convention, le code ci-dessus se transformerait en :

<button class="Button -small -green -caps">Texte</button>

C’est quand même plus agréable à lire, non ?

Et si vous utilisez Sass, le mettre en place et en assurer la maintenabilité devient un jeu d’enfant.

.Button {
  padding: 2rem;

  &.-small {
    font-size: 1rem;
  }

  &.-green {
    background-color: green;
  }

  &.-caps {
    text-transform: uppercase;
  }
}

Autres emprunts à SUIT

J’utilise également deux autres conventions provenant de SUIT : les classes utilitaires et les classes d’état.

Classes utilitaires

Ce sont des classes génériques, identifiables par un préfixe u- :

.u-white {
}

.u-floatLeft {
}
...

Classes d’état

Celles-ci permettent d’identifier le changement d’état d’un composant; elles sont préfixées par is- :

<button class="button is-disabled">Text</button>

Sélecteurs JavaScript

Pour tous les sélecteurs que je vais cibler en JS, j’ajoute une classe (ou une id) préfixée par js-. Cette classe ne doit jamais apparaître dans mes CSS afin de maintenir une séparation claire des rôles.

What’s next ?

Même si la mise en place de cette méthodologie m’a procuré un gain énorme en termes de maintenabilité et de lisibilité sur des grosses bases de code CSS, elle n’est pas infaillible, et les risques de non-isolation et de spécificité du code existent toujours.

Pour contourner – entre autres – ces problèmes, Glenn Maddern a créé un système de modules CSS. Grâce à du JS, les styles sont maintenus à leur création dans un scope local qui permet de résoudre les questions de nommage et d’héritage. Malheureusement, cette solution rajoute un niveau de complexité supplémentaire qui risque d’en rebuter certains.

Reste a espérer qu’un standard verra enfin le jour pour corriger ce casse-tête…