Ordonnez vos déclarations CSS !

raphael

S’y retrouver au sein d’un fichier CSS de plusieurs centaines de lignes de déclarations est souvent fastidieux, notamment dans le cadre d’un projet web collaboratif et quand vos collègues ont d’autres habitudes d’écriture que les vôtres.

Par expérience, j’ai pu constater que l’un des moyens pour améliorer rapidement la lisibilité du code CSS est de systématiquement faire apparaître les déclarations dans un ordre identique au sein des blocs de règles. La compréhension et la relecture de la feuille de styles en sont grandement facilitées.

—

À ma connaissance, aucun organisme n’établit ce que l’on pourrait appeler un « agencement officiel ». Je vous suggère cependant de respecter la logique suivante, même si celle-ci – vous allez vous en rendre compte – n’est pas forcément adaptée à tous les cas pratiques :

  1. Contenu généré : les propriétés afférentes au contenu créé via :after et :before (content, counter, quotes).
  2. Propriété display : tout ce qui affecte le rendu par défaut de l’élément (none, block, inline, inline-block, table,_ table-cell_,_ table-row_, flexbox, list-item).
  3. Positionnement : tout ce qui détermine la position de l’élément (position, float, top, right, bottom, left, vertical-align, z-index, clear).
  4. Modèle de boîte : tout ce qui influe sur les dimensions de l’élément (width, height, min-width, min-height, max-width, max-height, margin, padding, border, overflow).
  5. Transformations et transitions : propriétés et valeurs CSS 3 (transform, rotate, scale, skew, transition).
  6. Typographie : tout ce qui détermine les caractéristiques de la police de caractères (font, text-align, text-decoration, letter-spacing, text-indent, line-height, text-transform, white-space, word-wrap).
  7. Décoration : les propriétés purement ornementales (background, color, list-style, outline).

Ce genre de compartimentage demeure imparfait dans la mesure où certaines propriétés sont
polymorphes, à l’image de border, composante intrinsèque du modèle de boîte mais qui sert généralement à la décoration, ou encore de color, propriété commune à la fois en typographie et en décoration.

Note : ce billet est un extrait de mon livre « CSS avancées, vers HTML5 et CSS3 ».

Outil : **Darklg a concocté un outil magique qui réordonne et corrige vos feuilles de styles : **CSSLisible.