dans Web Design

Comment bien organiser vos fichiers CSS

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.

  1. 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…)

  2. 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...

  3. @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.

  4. 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.

  5. 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.

  6. 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 ! 😛

  7. 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 🙂

Commentaires clos.