SMACSS — Architecture évolutive et modulaire pour CSS

Il n’existe pas de méthode universelle pour faire un site web. Tout au plus peut-on dégager de la pratique quelques principes de conception pour organiser le code HTML et CSS d’un projet à l’autre. Dans cette optique, Jonathan Snook (@snookca) nous fait profiter de son expérience avec SMACSS. Vous l’aurez compris, SMACSS fait la part belle aux règles CSS que l’auteur a divisé en quatre parties : base, maquette (structure), module et état. Cet article est un bref aperçu de la première partie du livre pour vous donner l’eau à la bouche.

Diviser pour mieux régner

1. Base — Il s’agit des réglages par défaut valables pour l’ensemble de votre projet. Ils devraient se composer exclusivement de sélecteurs simples, mais peuvent comporter des sélecteurs d’attributs, des pseudo-éléments , des sélecteurs frères ou enfants. Cf. 5 Reset CSS à la loupe.
2. Maquette — Ces règles divisent la page en plusieurs sections qui peuvent comporter un ou plusieurs modules. Cf. Choisir un framework HTML & CSS.
3. Module — Ce sont les parties modulaires, réutilisables de votre page (légende, mise en exergue, fiche produit).
4. Etat — Ces règles spécifient : le comportement de la maquette et des modules  selon le contexte (activé / pas activé, affiché / masqué) ; l’affichage de la page selon la résolution de l’écran ; ou l’apparence de tel module selon qu’il se trouve en page d’accueil ou en page «intérieure».

Convention de nommage

Une fois que l’on a divisé nos règles CSS, il devient facile de mettre en place une nomenclature adaptée pour savoir du premier coup d’œil à quel élément l’on a affaire : quel est son rôle dans la page, sa portée, etc.

Pour cela, on peut utiliser des préfixes, comme l- ou layout- pour les éléments de la maquette (layout), mais grid- fonctionne très bien aussi ! Pour préfixer les règles d’état, on peut utiliser is- pour is-hidden ou is-collapsed. Les modules composent généralement la plus grande partie d’un projet. C’est pourquoi mettre un préfixe module- systématiquement est plus verbeux qu’autre chose. Préférez plutôt le nom du module lui-même, et basta !

Exemples de classes

/* Callout Module */
.callout { }
/* Callout Module with State */
.callout.is-collapsed { }
/* Form field module */
.field { }
/* Inline layout */
.l-inline { }

Les éléments situés dans un même module utilisent le nom de base du module. Les légendes du modules .field s’appellent .field-caption, c’est simple et clair. Pour les mêmes raisons, les modules qui sont des variations d’un autre module devaient utiliser le même préfixe de base.

Il devient facile de décliner votre maquette selon le contexte. Par exemple pour permuter l’article et la barre latérale :

#article { float: left; }
#sidebar { float: right; }
.l-flipped #article { float: right; }
.l-flipped #sidebar { float: left; }

Ou encore pour passer d’une largeur fluide à une largeur fixe :

#article {
    width: 80%;
    float: left;
}
#sidebar {
    width: 20%;
    float: right;
}
.l-fixed #article { width: 600px; }
.l-fixed #sidebar { width: 200px; }

Identifiant vs. classe ?

Ces exemples utilisent des sélecteurs d’ID pour la maquette mais rien ne vous empêche d’utiliser des classes (voire même un framework CSS) : la différence de performance entre les deux est quasi-inexistante.

Par ailleurs, à cause de leur poids plus important, les identifiants peuvent poser des problèmes de spécificité et nécessiter l’ajout de sélecteurs inutiles pour surclasser telle ou telle déclaration.

Pour aller plus loin

Après ce rapide aperçu, je vous invite à vous procurer SMACSS aussi vite que possible pour découvrir toute une floppée de trucs et astuces qui vous aideront à organiser vos maquettes, vos modules et les états qui vont avec.

Notez que l’auteur précise que ses conseils ne sont pas à suivre aveuglément. Toutefois, il insiste tout de même sur le fait qu’il est important d’avoir des conventions documentées et de s’y tenir.

SMACSS est un livre électronique dont on peut obtenir la dernière version à partir de 9$ pour la version Kindle (ou 15$ pour la version PDF, ePub et mobi).

→ Notez que la version originale est disponible gratuitement en ligne.