Voici la suite de comment bien organiser ses feuilles CSS. Dans la première partie, j’ai décrit ma méthode d’organisation des fichiers ainsi que de l’en-tête de mes fichiers CSS.
Une fois l’en-tête bien déclarée, nous pouvons commencer à implémenter nos styles selon les différentes sections présentes dans notre site Web. Il est important de bien diviser notre fichier en plusieurs sections.
Chaque section se devrait d’avoir un en-tête de ce genre :
/***********************************
———->>> NOM DE LA SECTION PRINCIPALE (ex : header) <<<———–
***********************************/
En faisant cela, nous nous assurons de bien séparer chacune des sections principales. Il devient  donc plus facile de repérer ces mêmes sections.
Ensuite, nous commençons à implémenter les styles pour la section en question.
div#wrap header {
width: 99.9%;
height: 145px;
}
div#wrap header hgroup {
width: 180px;
height: 144px;
float: left;
margin-left: 20px;
background: url(../images/logo-bg.png) top left no-repeat;
}
..etc
Les propriétés des classes et IDs devraient être dans un ordre logique. Le code est encore plus structuré et en utilisant cette méthode, vous verrez que vous gagnerez en rapidité à long terme. Avant, je ne faisais que mettre les propriétés en ordre alphabétique comme ceci :
div#wrap header hgroup {
background: url(../images/logo-bg.png) top left no-repeat;
float: left;
height: 144px;
margin-left: 20px;
width: 180px;
}
Mais je me suis vite rendu compte que ça me nuisait plus qu’autre chose. Par exemple, j’ai l’habitude de toujours placer la propriété height après la propriété width.  Je perdais  donc du temps inutile à chercher mes propriétés.
La solution était donc de garder un ordre semi-alphabétique, mais logique! En effet, maintenant je place mes propriétés selon l’ordre logique suivant : sizing, positionning, background et autres. (noter que vous pouvez créer l’ordre logique qui vous conviendra le mieux..)
Ex. de mon ordre semi-alphabétique logique :
header {
width: 100%;
height: 150px;
float: left;
margin: 10px;
background-color: #eee;
background-position: top left;
autre…
}
Voilà ! Il ne reste plus qu’à tester quelle méthode sera la plus pertinente pour vous. Et vous, quelle méthode utilisez-vous?
