http://www.blog-html5.com
October 1, 2009
-
Comment bien organiser ses feuilles CSS? (Partie 1)
Ceci est la première partie de comment bien organiser ses feuilles CSS. Vous trouverez la partie 2 la semaine prochaine.
Plusieurs personnes utilisent leur propre méthode pour organiser ses feuilles de styles. Certains préfèrent utiliser qu’une seule ligne pour toutes leurs déclarations tandis que d’autres préfèrent indenter le plus possible leur code. Existe-t-il une méthode à privilégier pour s’assurer de créer des gabarits de qualité? Il en existe plusieurs, mais je vais vous décrire celle que moi j’utilise dans pratiquement tous mes projets. Je ne dis pas quelle est la meilleure, mais je crois qu’elle offre beaucoup d’avantages.
Tout d’abord, je déclare toujours 2 feuilles de styles dans toutes mes pages HTML. J’ai toujours mon « master.css » (qui est mon fichier maître) et mon fameux « reset.css ».
« master.css » comprend plusieurs autres fichiers comme par exemple base.css, typography.css, layout.css, etc…
Chacun de mes fichiers CSS contient un en-tête séparé en 4 sections : les informations de base, ma « table of content », les couleurs et finalement les « flags ».
Les informations de base sont les suivantes : le nom du fichier, sa description, l’auteur, la date de création et la date de la dernière modification.
Ma « table of content » est en faite toutes les grosses sections qui sont présentes dans mon fichier. Ex : header, navigation, content, footer, etc.
Mes couleurs sont une liste des couleurs que j’utilise plusieurs fois dans le même fichier.
Mes « flags » sont là pour faciliter la recherche dans mes fichiers CSS. (Je ferai un autre post prochainement sur l’utilisation et l’efficacité des flags.)
En ayant un en-tête dans tous vos fichiers, il devient plus simple de bien comprendre le fichier en question. De plus, si dans le futur une autre personne se doit de faire des modifications dans l’un de vos fichiers, cette personne ne pourra qu’en bénéficier puisque qu’elle pourra trouver ce qu’elle cherche rapidement. Le temps c’est de l’argent comme on dit…
Et vous, comment organisez-vous vos en-têtes de fichier?
Exemple d’en-tête de fichier CSS :
/**********************************************
MAIN INFO@filename : layout.css
@description : Voici la description de mon fichier CSS
@authors : Simon Guérin
@date : September 22 2009
@modification : September 23 2009TABLE OF CONTENTS
#header
#content
#nav
#footerCOLORS
#8h1h2h ——— light blue
#333333 ——— dark grayFLAGS
=header
=content
=nav
=footer**********************************************/
