Reading Doug’s post about organisation I noticed that he codes is classes in almost exactly the same order I do.
After writing so much CSS, I’m even a little anal as to the order of properties within each declaration block. Backgrounds always go first. Then position or float information. Then width/height measurements. Then margin/padding/border. Then text formatting and color. Not every one of those properties is always present, but that’s the general order I usually try to follow. I’m usually not even conscious I’m doing it by now.
I’ve used his tutorials quite a bit through the years, I wonder if I picked it up uncounsciously or just came to the same analness on my own. I know, second completely useless post this morning. Trying to make it a bit more useful; anyone else who codes css have a preferred order for things?
2 Comments
No, not useless. It just shows that you are naturally methodical—which is a good thing. It’s a way of making sure that repetitive tasks are done correctly without having to dedicate an inordinate amount of mental space to them. When the ordering of the properties comes automatically, it means you’re less likely to leave something out, and more likely to focus on what’s important—the actual properties themselves!
Oui, c’est tout à fait naturel pour quelqu’un qui code en fait. C’est normal que l’on retrouve une structure dans nos css.
J’ai tendance à mettre tout d’abord les déclarations qui changeront souvent lors du développement en haut de la règle. Plus facile à trouver si tu mets margin toujours le premier en sachant que tu vas devoir le modifier quelques fois pendant les tests. Et aussi j’y mets en premier l’info la plus importante. Par exemple, si un élément doit «floater», c’est probablement cette info qui sera la première. En consultant le fichier CSS des mois après l’avoir fait, je suis bien content de voir rapidement que #secnav flotte à droite…
Et aussi, je classe mes règles par bloc, ce que tout le monde fait aussi j’imagine. Donc tout ce qui est dans le #header se retrouve dans un groupe «header», #nav dans un groupe «nav» et ainsi de suite.