Les feuilles de style CSS permettent aux développeurs d’améliorer le rendu visuel de leurs pages web. Mais, en travaillant sur des projets de grande ampleur qui regroupent plusieurs développeurs, ces feuilles de style deviennent souvent de plus en plus complexe, difficile à lire et à maintenir. Beaucoup de projets qui ont vu le jour permettent d’améliorer l’organisation et l’architecture de ces derniers. Parmi ces initiatives on cite SMACSS, qui a connu un énorme succès parmi les développeurs de CSS et qui nous a été utile dans nos développements. Ce projet a été lancé par Jonathan Snook, développeur web depuis 1999. Parmi ses livres les plus célèbres, on trouve : The Art and Science of CSS et Accelerated DOM Scripting.
SMACSS ne désigne pas un Framework comme Bootstrap ou Foundation mais plutôt un ensemble de règles qui permettent de mieux organiser le CSS de votre application. Dans cet article nous allons faire un petit passage sur les composantes principales de SMACSS. Afin d’avoir des connaissances plus profondes sur le sujet vous pouvez consulter le site officiel : https://smacss.com/ ou en lisant Scalable and Modular Architecture for CSS qui est disponible en téléchargement sur le site mentionné précédemment.
Chaque projet a besoin d’avoir une organisation spécifique des fichiers CSS. Mais plusieurs développeurs tombent dans l’erreur d’écrire leurs codes de styles dans un fichier unique ou dans des fichiers distribués de façon aléatoire. Ainsi la maintenance de ces derniers une tâche assez pénible.
SMACSS propose ainsi de diviser les styles en 5 catégories :
Base
Layout
Module
Etat
Thème
Base
Les styles de base SMACSS désignent les valeurs par défaut qui sont partagés par les différentes pages. Dans cette catégorie on ne peut pas trouver des sélecteurs spécifiques, des classes ou des IDs. On trouve plutôt une description générale des différents éléments dans les pages :
Layout
Les différentes règles de styles dans cette catégorie servent à diviser la page en différentes sections. Avec SMACSS, un layout désigne plutôt les grands composants de la page tels que les Header, Footer, etc… mais il ne concerne pas les petits composants tels que la barre de navigation, fenêtre de dialogue qui sont plutôt mis dans des modules.
Exemple d’un layout de page web
Généralement on utilise des ID pour les styles de ces composants majeurs mais il faut bien garder le reflex d’utiliser des classes pour les éléments qui peuvent être partagé.
Modules
Un module est un composant plus précis au sein de la page. Citons à titre d’exemple, les widgets, les articles, les sliders etc... Les modules sont embarqués aux seins d’un layout.
Parmi les règles qui concernent les modules on trouve :
Chaque composant doit exister comme étant une entité autonome. Cela rend le design plus flexible et plus maintenable. Ainsi on peut facilement les réutiliser ou les intégrer dans de nouvelles pages.
Eviter l’utilisation des IDs pour sélectionner les éléments mais plutôt favoriser le recours à des classes spécifiques et contenu dans ce module.
State
Avec SMACSS, les éléments de State permettent de décrire le comportement des composants suite au changement de contexte. Ainsi cette partie concerne l’interactivité des composants. Prenons l’exemple d’un accordions qui peut être réduit ou étendu. Il y a plusieurs similarités entre les states et les modules car les deux changent l’apparence d’un élément mais il y a deux principales différences :
Les states peuvent être appliqués à des Layout ou des modules ou les deux à la fois.
Les States peuvent avoir des dépendances avec Javascript.
L’utilisation du !important est autorisé dans le contexte des states vu que ces derniers sont utilisés pour rédéfinir le comportement par défaut. Cela n’est pas le cas pour les autres éléments (Layout, Base, etc…).
Themes
L’ensemble de ces règles servent à définir la palette des couleurs, les effets, les contours etc… Il ne faut confondre l’ensemble de ces règles avec la base. La différence consiste à ce que les règles de base définissent l’apparence générale. Et, ils peuvent être redéfinis alors que les règles servent à définir le rendu visuel final que les utilisateurs vont consulter.
Ces règles sont aussi utiles pour définir plusieurs thèmes qui peuvent être facilement interchangeables.
Dans cet article nous avons fait le passage sur les règles de SMACSS qui permettent d’optimiser l’architecture et l’organisation de vos CSS. Cette approche nous a été utile alors pourquoi pas à vous ? Pour approfondir sur le sujet, n'hésitez pas à consulter le site officiel du projet.
