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.

N'hésitez pas à partager cet article !

Tags : css, Web Design

Commentaires

9 commentaires pour l'article “Comment bien organiser vos fichiers CSS”

Olivier G. dit :

12 février 2008 à 23 h 06 min

À la place de débuter les ancres avec _, je commence par =, qui est encore moins utilisé
Rémi dit :

12 février 2008 à 23 h 49 min

Perso j’ai mis en place un sommaire au début des CSS importantes avec les grandes parties ainsi que les sous parties et les pages ausquelles elles correspondent. Comme ça les agences qui interviennent sur nos CSS ne sont pas perdues

Pour le chargement des CSS, on utilise un script (en js) qui va detecter le navigateur et charger la feuille de style associée (pour pouvoir débugger indépendamment et surtout pour éviter les hacks…)
bruno bichet dit :

13 février 2008 à 2 h 22 min

Merci pour les astuces Pour ma part, je fait souvent un sommaire mais je ne pense pas toujours à faire des ancres avec _ ou =, ce qui peut faire gagner du temps.

Allez, un peu d’auto-promo bien à propos pour un billet sur… l’organisation des CSS : http://www.css4design.com/blog/o...
Olivier G. dit :

13 février 2008 à 7 h 48 min

@Rémi, utiliser un js pour charger une feuille de style pour éviter les hacks, c’est un peu choisir entre la peste et le choléra… Intéresse-toi aux commentaires conditionnels.
Rémi dit :

13 février 2008 à 9 h 31 min

Oui tu as raison, mais c’est un choix volontaire tout de même car le javascript permet une detection bien plus complète du navigateur qu’avec les commentaires conditionnels.
bruno bichet dit :

13 février 2008 à 12 h 18 min

Je suis assez d’accord avec Olivier G. à propos de la peste et du choléra, pour autant, je suis assez curieux de savoir quelles sont les déclarations CSS que tu réserves à quels navigateurs, en dehors de IE, parce qu’à priori, les commentaires conditionnels permettent de cibler très précisément toutes les versions d’IE, et même de fournir du contenu pour les autres navigateurs en dehors d’IE.
Rémi dit :

13 février 2008 à 12 h 48 min

Sans trop rentrer dans les détails mais il reste quand même des différences d’interpretation entre les différents navigateurs, en fonction de leur version, de leur plateforme etc.

L’intérêt d’utiliser du JS c’est de pouvoir localiser précisement le navigateur. Donc on a une CSS principale (une identique mais spécifique à IE6, pour corriger toutes les merdes d’IE) puis on charge une CSS dédiée à chaque navigateur et qui permet de corriger les petites différences d’interpretation entre les differents navigateurs (IE7, firefox, safari, opera, etc.)
Dans l’idéal, et je compte le mettre en place prochainement : avoir des CSS aussi en fonction de l’OS, par exemple firefox MAC, linux et PC ont des différences de comportement

Enfin après faut trouver un juste milieu et pas passer trop de temps sur les navigateurs marginaux. Mais pour moi commentaires conditionnels + hacks ca reste léger !
rhizome dit :

22 février 2008 à 4 h 39 min

c’est clair que la détection js permet d’identifier clairement le navigateur et tout le toutime, mais un peu plus fastidieux a mettre en place.

Sinon, super comme explication, je rajoute aussi un petit sommaire au début pour bien m’y retrouver
lorran dit :

21 mars 2008 à 22 h 37 min

très bons tuyaux, merci !