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.
- Positionnement
- Dimensions
- Texte
- Bordures et fonds
- 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;
DuaelFr, le
Je te rejoins sur la nécessité de définir une ligne directrice dans l’organisation de ses propriétés CSS et d’autant plus lorsque l’on travaille en équipe.
Cependant, étant un grand adepte du versionning et ayant très souvent besoin de faire des modifications concurrentes sur les fichiers CSS en cours de conception, je préfère largement la disposition en colonne et par ordre alphabétique. La seule et unique raison à cela est que la fusion de deux CSS par différence de texte (diff) fonctionnera beaucoup mieux !
Le défaut de cette technique c’est qu’un de tes CSS de 500 lignes en fera plutôt 2000 avec ma méthode. Heureusement que les IDE viennent nous sauver dans ce cas en permettant un accès rapide aux déclarations.
Thomas, le
Salut Rémi !
De même, je préfère organiser les propriétés par ordre alphabétique.
C’est déjà assez difficile de convaincre toute l’équipe d’organiser les CSS. Si en plus l’ordre choisi n’est pas naturel, c’est la cata.
Bonne journée,
Thomas.
Rémi, le
J’avais déjà testé l’ordre alphabétique, mais je trouve ça totalement aberrant d’avoir par exemple les propriétés position, bottom, left à 3 emplacements différents.
Pour ce qui est de l’écriture tout en ligne, c’est une habitude de travail. Pour coder en CSS, j’utilise principalement Firebug qui indique le numéro de ligne de la règle (et non pas des propriétés). En codant tout en ligne, ça me paraît plus limpide et je n’ai pas à réfléchir ensuite pour rechercher la ligne de la propriété une fois la règle trouvée.
Pour ce qui est de la fusion de plusieurs CSS, je me souviens que ça posait problème quand je travaillais en .net avec SourceSafe, qui était incapable d’indiquer des différences au sein d’une ligne (mais ça a probablement changé depuis). Maintenant, je suis sur Mac avec SVN et le FileMerge par défaut de Mac OS, et tout fonctionne niquel.
Sébastien, le
Bonjour !
Je préfère également l’ordre alphabétique. Cela a le mérite de mettre les propriétés propres à chacun des navigateurs au début alors que les mêmes propriétés finales sont déjà à leur place dans la déclaration.
De plus, en cas de reprise de code, l’ordre alphabétique est facilement décelable et repris alors que l’ordre que tu proposes, qui, je n’en doute pas, est très logique pour toi, ne le sera pas forcément pour tout le monde et demandera un effort intellectuel à faire pour chaque nouvelle déclaration, jusqu’à la prise de l’automatisme.
J’appuie également le point de vue de Thomas en ce qui concerne le fait de convaincre l’équipe d’organiser son code :-)
Bonne journée !
Sébastien
Emmanuel, le
Ordre alphabétique pour ma part également, par préférence personnelle et parce que les outils comme Firebug ou encore les validateurs ou nettoyeurs css suivent cette convention par défaut, donc pas de prise de tête pour réorganiser l’ordre des propriétés.
Une ligne par propriété également, pour la lisibilité.
La réorganisation que tu proposes me fait beaucoup penser à la séparation des css en différents fichiers, répartissant par exemple grille, fontes, couleurs dans des fichiers propres.
IntegrateurFree, le
Hello,
Je fonctionne comme toi pour ma part, bien plus pratique que l’ordre alphabétique. Cependant les bordures et les fonds arrivent avant le texte quand même.
Remi Grumeau, le
Drôle, je suis exactement pareil et je me fait traiter de fou… bon ça doit venir aussi du fait que j’indent mes CSS.
Seuls petites modifs: le float: left arrivera avant les tailles, et les border après le background.
Julien, le
Chacun son truc mais personnellement je trouve l’ordre alphabétique complètement idiot.
J’applique également la méthode « positionnement / dimensions / reste » je préfère une approche « box model » : de l’extérieur vers l’intérieur.
METHODE de positionnement :
position: …
display: …
float: …
clear: …
Le positionnement :
top: …
left: …
right: …
bottom: …
Tout ce qui impacte les dimensions dans l’ordre du box model :
margin: …
border: …
padding: …
width: …
height: …
Ensuite le texte, background, etc..
Je garde l’ordre alphabétique au sein d’une même famille de propriétés, par exemple : font-family avant font-size, idem pour text-***, background-***, etc…
Pour les propriétés CSS3, je les garde aussi à la fin mais certaines doivent parfois passer au premier plan notamment box-sizing qui impacte le box-model…
Laue, le
Classer par ordre alpha permet une meilleur gzipation du fichier lors de son envoi compressé par le serveur.
val, le
Bonjour, existe t’il un outil de recherche spécifique aux feuilles css? car il arrive que l’on doive retravailler dans un code qui effectivement ne reprend pas notre logique. et certaines pages css sont kmétriques comment retrouver très vite une class par recherche sans devoire faire un remplacement de texte quel outil utiliser vous merci