Comment bien organiser vos fichiers CSS | Carnet de Gilles Gissinger, consultant web

Comment bien organiser vos fichiers CSS

Publié le 12 fév 2008 par leGizz dans Web Design

Tout webDesigner qui se respecte utilise des feuilles de styles. L’intérêt de ces dernières est indéniable, je ne reviendrai donc pas sur ce point. Intéressons-nous un peu à l’organisation des CSS.

Définition du contenu de la feuille de styles (CSS)

Si vous avez déjà récupéré des feuilles de style depuis un CMS (dotclear, wordpress ou autre), vous avec certainement constaté une section au début du fichier CSS contenant quelques informations sur l’auteur, la date de création, la version etc…
Exemple :

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -* Filename: grid.css* Version: 1.0.0 (2007-09-21) YYYY-MM-DD* Website: http://site.com/* Author: Name* Description: Handles the site layout.== STRUCTURE: ==============================* Page width: 950 px* Number of columns: 3============================================- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -*/ 

Les commentaires

Les commentaires sont toujours pratiques dans un code source. J’en place un peu partout, toujours utile lorque l’on reprend un fichier de plusieurs centaines de lignes que l’on a pas utilisé depuis longtemps.

Les ancres

Un peu comme en HTML les ancres permettent de faire un lien au sein même d’une page. Sauf que dans un fichier CSS ça marche avec la fonction rechercher (ctrl+F pour les anciens). Ce que je fais en général en début de fichier je place une sorte d’index comme suit :

== INDEX: ===================================_header : entête _sidebar1 : barre latérale _footer : ...ben le footer.============================================ 

Pensez bien à utiliser un identifiant unique ou alors à préfixer vos ancres (avec un « _ » underscore par exemple). Dans le cas contraire vous allez vous rendre fou à chercher un texte déjà utilisé dans le code CSS (fond, texte…).

Ensuite il conviendra d’insérer l’ancre au bon endroit dans votre fichier CSS :

/* _header <- l'ancre précédemment nommé au début du fichier ==========================================*/#header{<attributs>} #header .logo{<attributs>}[...]

/* _footer <- l'ancre précédemment nommé au début du fichier==========================================*/#footer{<attributs>}==========================================*/ 

Vous l’aurez compris, une recherche dans le fichier vous menera directement à la partie du code qui vous intéresse.

Le nommage des fichiers

Afin de mieux s’en sortir avec les différents éléments CSS, il est préférable de séparer vos CSS en différents fichiers comme ceci par exemple :

• typography.css : contient les polices, titres, couleurs etc… En fait la typographie.
• layout.css :contient la mise en page
• form.css : la mise en forme des formulaires 
• script.css : les feuilles de styles associées à divers scripts importés (scriptaculous, etc…)
• print.css : la feuille de styles pour l’impression
• xxx.css for : tout ce que vous jugerez bon pour vous simplifier la vie

Cette division de vos fichiers CSS permet d’y voir beaucoup plus clair, le code de chaque CSS sera nettement plus court. Ensuite 2 solutions : vous intégrez chaque fichier CSS dans votre HTML. Ou alors vous créez un fichier CSS master incluant tous les autres, ainsi il n’y aura qu’un fichier CSS à appeler depuis votre HTMLeu…

Ce billet m’a été inspiré du site Dezigner Folio.

Tags : css, Web Design