Organiser ses feuilles de style CSS

J’ai regardé l’organisation des CSS dans de nombreux CMS, de Dotclear à WordPress en passant par des plate-formes de e-commerce. Il n’y a pas deux feuilles de style qui partagent la même organisation, exceptée la remise à zéro du padding et du margin via le sélecteur universel ou seulement pour les éléments html et body, ou encore le choix de la police de caractère (famille, taille, interlignage et couleur du texte) pour le seul élément body. Certaines commencent par la structure pour finir avec les éléments html quand d’autres mettent les déclarations dans l’ordre alphabétique…

Comment ça ? Alors que tout le monde utilise une méthode similaire pour réaliser un menu horizontal en transformant les liens en bloc pour leur donner une taille et en faisant flotter les éléments de listes, il n’existe pas de consensus sur l’organisation des feuilles de style CSS ?

Un peu d’organisation ne fait pas de mal

Après quelques recherches, certaines approches semblent néanmoins faire des adeptes.

1. L’une d’elles consiste à séparer les propriétés typographiques du positionnement, lui-même divisé en plusieurs parties comme header, middle et footer par exemple.
2. Une variante consiste à ajouter une partie par grande famille d’éléments : liens, listes, images, formulaires, etc.
3. Dans le même esprit, erracticwisdom divise la feuille de style en commençant par les élément globaux, continue avec la structure puis finit avec les titres, les styles de texte, la navigation, etc. Rien de bien nouveau me direz-vous, si ce n’est qu’il propose, pour chaque partie, d’indenter les règles CSS. A ce propos, NubiumGraphik propose une astuce pratique pour indenter les CSS à l’image du code HTML à coup de chercher-remplacer.
4. Pour structurer des gros fichiers CSS, Emil Stenström s’applique à mettre les sélecteurs dans l’ordre où ils apparaissent dans le HTML, indente aussi son code, met chaque déclaration sur sa propre ligne dans l’ordre alphabétique, et utilise toujours le chemin complet pour atteindre un élément donné #content p strong { … }.
5. Quelque soit la structure de votre CSS usez et abusez des astuces d’écriture des règles CSS pour vos déclarations. Ca change la vie, vraiment 😉
6. Pour terminer ce florilège je vous conseille la lecture du billet paru dernièrement sur biologeek Des CSS de qualité qui fournit des idées et des liens concernant les feuilles de style tout en donnant un exemple concret reprenant : le principe de remise à zéro des éléments mise au point par Eric Meyer ainsi que l’indentation systématique chère aux programmeurs.

Et moi et moi et moi…

Quand je regarde ma propre pratique, je m’aperçois que j’ai pris quelques habitudes perfectibles : je commence souvent par la structure. Je mets en place le gabarit avec son cortège de container, de main, de sidebar, de footer.

J’ai longtemps utilisé la remise à zéro de tous les éléments via le sélecteur universel… * {margin: 0; padding: 0} mais le reset-reloaded semble bien plus complet et mieux maitrisable. Et si David Larlet l’utilise alors nous le pouvons tous 😉

Une fois la maquette en place, je mets l’ensemble dans un fichier indépendant appelé dans styles.css avec @import url(layout.css). En général, une fois calée, la structure globale ne change pas à condition de ne mettre que l’essentiel. Par exemple, dans un design à largeur fixe, certaines valeurs de margin et de padding seront des éléments structurels, tandis que dans un design fluide, ces valeurs pourront être modifiées sans casser le design et trouveront leur place ailleurs.

Le fichier layout.css terminé, je redéfinis les éléments HTML. Si la structure sémantique du document est bien respectée et si les différents niveaux de titres partagent les mêmes caractéristiques sur l’ensemble du site, je définis toutes les propriétés ici dans ce fichier html.css, autrement je me concentre sur les marges et je m’occupe des éléments typographiques dans la feuille principale styles.css.

Reste ensuite à styler tout le reste. Pour cela, je respecte l’ordre d’apparition des identifiants et des classes dans le code html pour construire ma feuille styles.css et je termine par une partie toolbox où je définis quelques classes récurrentes tels que .floatleft {float: left} ou .clearer {clear: both}.

Pour finir, je fais une relecture de ma feuille de style et je regarde ce qui peut être factorisé, mieux organisé, un peu comme pour un texte. Au début j’en mets des tonnes pour alléger après en ne gardant que l’essentiel.

C’est plutôt empirique et ça fonctionne bien… Du moins pour ce qui concerne les sites où les gabarits sont peu nombreux, car lorsque ce n’est pas le cas, le fichier styles.css peut vite devenir ingérable et mieux vaut se tourner vers des méthodes d’organisation complémentaires.

Organiser les CSS pour les gros sites

Pour faire face à cette situation, il existe plusieurs approches pour lesquels je me limiterais à vous fournir quelques liens. Il n’est déjà pas facile de se mettre d’accord sur l’organisation des CSS concernant un site relativement simple, alors vous pensez bien qu’il n’y a pas de recette pour les cas complexes. Et puis en même temps, si vous avez hérité d’un cas compliqué, c’est que vous le valez bien…

C’est certainement le cas pour GouBlog qui doit jongler avec des fichiers CSS multiples dans le cadre de sites complexes où de nombreuses personnes travaillent ensemble.

Quand vous créez des feuilles de style un peu complexe, pensez à Dave Shea, l’auteur de CSS Zen Garden, qui a évoqué la question sous l’angle de la redondance vs dépendance concenant les déclarations CSS. L’article de Garret Dimon sur l’architecture des CSS paru sur Digital Web est également intéressant à lire, d’autant plus qu’une version française existe !

Pour aller plus loin

Il n’y a pas de recette miracle pour structurer ses CSS ; juste une foule de détails à prendre en compte pour construire des feuilles de style solides résistant à l’épreuve de la maintenance. Si je ne devais citer qu’une source pour avoir sous la main les dernières techniques CSS dont on parle dans les salons, ce serait smashing magazine avec notamment des articles comme 53 CSS-Techniques You Couldn’t Live Without ou 70 Expert Ideas For Better CSS Coding.

Voilà, si vous êtes arrivés jusqu’ici, profitez-en pour lâcher votre site incontournable sur les CSS dans les commentaires 😉