Avez-vous déjà repris une feuille de style après plusieurs semaines ou mois ? Ou la feuille de style de quelqu'un d'autre ? Il est souvent bien difficile de s'y retrouver. Je vous propose ici un plan d'organisation de votre fichier style.css.

Ce plan servira en outre d'une part à ne rien oublier – enfin le moins possible –, d'autre part à vous guider pour l'ordre dans lequel établir les règles.

Il est important de retenir que les styles sont appliqués dans l'ordre où ils sont lus. Si par exemple vous inscrivez au début de votre fichier que le texte doit être en bleu et à la fin qu'il doit être en rouge, c'est rouge qui gagne. L'incidence n'est pas négligeable : si vous définissez des largeurs de boîte dans la partie structure et que vous en indiquez une autre (ou erreur plus courante, des margins ou des paddings) plus loin, votre structure sera mise à mal. On cherche parfois des heures entières pourquoi telle mise en page n'obéit pas à nos vœux sans penser qu'on a donné des instructions contradictoires plus loin.

Je vous invite chaudement à lire l'article « Comprendre la cascade » que Marc Hertzog[1] a publié à ce sujet.

C'est pourquoi je recommande de bannir résolument toute indication de width, margin, padding, border des blocs #page, #top, #main, #content, #sidebar, #blognav, #blogextra, #footer ailleurs que dans la partie « structure ».

Plan de la feuille

Commencez par le bloc licence, éventuellement accompagné d'indications à garder sous la main comme la liste des couleurs utilisées et leur code hexadécimal (perso je trouve ça pratique) puis :

  1. structure : pour une utilisation facilitée, n'y inscrivez que les règles de dimensions et de marges à l'exclusion de toute notion de décoration. Par conséquent, excluez également toute notion de dimensions et de marges dans les règles ultérieures des blocs ici définis...
  2. comportement par défaut des balises html : règles globales, présentation des balises courantes
  3. page (global) : notamment couleur ou image de fond
  4. top et prelude : décoration et particularités de l'entête de la page
  5. main et content : points communs
  6. billets
  7. commentaires et trackbacks
  8. sidebar, blognav, blogextra
  9. footer
  10. classes communes[2]
  11. règles pour pages spécifiques (s'il y a lieu).
  12. clearers : tous les blocs sur lesquels ajouter des clearers. En les plaçant en fin de la feuille vous vous assurez qu'ils ne seront pas contredits.

Usez et abusez des commentaires. Vous serez bien content de les retrouver dans six mois...

Vous trouverez dans les ressources de Dotaddict des feuilles de style prête à remplir comportant tous les marqueurs des thèmes de Dotclear.

Notes

[1] Auteur du thème par défaut de Dotclear 2.0.

[2] Pour disposer par exemple de class toutes prêtes pour le centrage, l'alignement à gauche ou à droite, des caractères plus petits, etc. et par exemple pour placer systématiquement l'icône rss sur tous les liens de ce type.