L’ordre des propriétés CSS

L’ordre d’écriture des propriétés en CSS n’a quasiment aucune importance. Du coup, ça relève en général de choix personnel, de l’ordre alphabétique ou d’un hasard total. Pourtant, quand on travaille en équipe, il est vite important d’établir quelques règles afin que tout le monde code de la même façon, sous peine de se retrouver avec un beau patchwork de styles. Voici l’ordre dans lequel je range mes propriétés CSS.

  1. Positionnement
  2. Dimensions
  3. Texte
  4. Bordures et fonds
  5. Propriétés CSS3 ou spécifiques navigateurs

L’idée est de prioriser les propriétés par récurrence et fonctionnalité, puis par longueur d’écriture. Quand vous faites de la surcharge d’héritage en CSS, ça va le plus souvent concerner du texte ou des couleurs de fonds. Il est donc indispensable que les propriétés moins courantes soient bien visibles et se retrouvent en tête de bloc.
Quand vous faites défiler rapidement votre CSS de 5000 lignes, il est plus facile de repérer la fin d’une règle CSS quand les propriétés les plus longues se trouvent à la fin. Et même si vous écrivez vos règles sur une seule ligne (comme moi), vous éviterez ainsi de polluer votre affichage horizontal avec des propriétés plus longues, et afficherez ainsi plus de propriétés dans le même espace.

Les propriétés de positionnement (position, float, top, left, ...) sont les plus importantes dans une règle, et aussi les moins récurrentes. Elles se retrouvent donc en tête, suivies par les propriétés de dimensions (display, width, height, padding, ...). Ensuite viennent les propriétés de texte (color, font, text-decoration, …), beaucoup plus courantes et souvent plus longues, plus nombreuses. En général, j’essaye au sein de ce groupe de trier les propriétés de texte par ordre alphabétique (ce qui rends la lisibilité encore plus facile avec les nombreuses propriétés préfixées par « text » ou « font »). On retrouve ensuite les propriétés de bordures et fonds (border, background), souvent les plus longues avec des chemins d’images à rallonge. Enfin, je vais placer toutes les propriétés spécifiques aux navigateurs. Ca inclut toutes les nouvelles propriétés CSS3 (border-radius, box-shadow, animations, transformations, …), qui nécessitent au minimum 3 écritures avec des préfixes différents (-moz-, -webkit- et sans préfixe), mais aussi des propriétés uniques à certains navigateurs (bonjour IE et ses filter).

Si vous codez en bloc (avec une propriétés par ligne), votre code ressemblera à une pyramide, comme ci-dessous.

/* Positionnement */
position:relative;
left:10px;
right:10px;
top:10px;
bottom:10px;
float:left;
/* Dimensions */
display:block;
width:600px;
height:600px;
padding:10px 20px;
margin:10px 20px;
/* Texte */
color:#cacaca;
font-size:12px;
font-style:italic;
font-weight:bold;
text-decoration:underline;
/* Bordures et fonds */
border:1px solid #cacaca;
border-bottom:none;
background:url(screenshot.jpg) no-repeat left top;
/* Propriétés CSS3, navigateurs */
-moz-box-shadow:0 0 10px #cacaca;
-webkit-box-shadow:0 0 10px #cacaca;
box-shadow:0 0 10px #cacaca;

Si vous codez en ligne (avec toutes les propriétés à la suite), vous aurez beaucoup plus de propriétés visibles sans avoir à scroller horizontalement, et les propriétés les plus longues systématiquement à la fin.
position:relative; left:10px; right:10px; top:10px; bottom:10px; float:left; display:block; width:600px; height:600px; padding:10px 20px; margin:10px 20px; color:#cacaca; font-size:12px; font-style:italic; font-weight:bold; text-decoration:underline; border:1px solid #cacaca; border-bottom:none; background:url(screenshot.jpg) no-repeat left top; -moz-box-shadow:0 0 10px #cacaca; -webkit-box-shadow:0 0 10px #cacaca; box-shadow:0 0 10px #cacaca;