Organisation des feuilles de style

Bonjour,

depuis quelques temps une question me taraude: comment organiser mes feuilles de style ?

Je travaille sur un projet graphiquement très chargé (et le graphiste tient au moindre pixel). Je me retrouve avec une feuille de style très longue, des background-image dans tous les sens, des dimensions et des marges différentes partout... bref un gros bordel si vous me permettez l'expression. Malgré mes efforts pour factoriser ce que je pouvais, cela reste très lourd.

Auparavant je structurais mes css en séparant par type d'éléments: cadres, liens, textes, formulaires, ...

Au milieu du projet j'ai changé pour structurer en fonction des pages. L'idée que j'ai en ce moment c'est d'avoir une feuille de style avec les éléments communs à toutes les pages (organisée par types d'éléments) et d'éclater le reste avec une feuille de style par page.

Si je pose la question, c'est que je commence à me perdre dans ce que j'ai déjà fait, et encore je suis pas arrivée au stade des compatibilités de navigateurs.

Je ne trouve pas vraiment de réponse claire dans Google, j'aimerais donc avoir l'avis de gens plus expérimentés.

Je vous en remercie d'avance, bien à vous !

Salut!

Tu pourrais commencer déjà par séparer tes feuilles de styles. Et puis les appeler via un @import dans une feuille de style principale.

Et puis après, je pense que les commentaires + quelques sauts de lignes sont suffisants garder un css propre et lisible.

Question bête: quelle différence entre appeler une feuille de style avec link dans le code où avec import dans une autre feuille de style ?

Au lieu d’appeler n fois tes n feuilles de styles. Tu appelles une seule fois une feuille de style qui importe ton n de feuilles de styles.

J'espère que tu as compris

Bonjour...

Petite précision : N'utilisez pas @import.

Mieux vaux utiliser quand c'est possible côté serveur des outils comme combine pour des questions de perfs.

Ok merci, je vais prendre le temps d'étudier ça.

Sinon d'autres avis sur l'organisation des feuilles de style ? Comment faites-vous ?

Bonjour,

Deux considérations à distinguer:
- l'organisation des fichiers de développement;
- le code à utiliser en production.

Pour un projet simple avec peu de styles CSS, les deux peuvent être confondus. C'est à dire qu'on appellera un fichier CSS unique (avec un <link rel=stylesheet> dans le HEAD du document), et qu'on placera tous les styles dans ce fichier unique, éventuellement en distinguant différentes parties en sautant des lignes et en plaçant quelques commentaires.

Pour un projet plus complexe, on travaillera avec plusieurs fichiers que l'on veillera à concaténer (voire minifier) avant de les servir en production. On pourra avoir 10 fichiers CSS différents, mais seulement un seul fichier servi en production (là encore appelé avec un <link>, on évitera effectivement @import).

Récemment j'ai travaillé sur un projet en utilisant Sass, qui est un script permettant de générer des fichiers CSS avec:
- des imports "en dur" de fichiers dans un autre (c'est à dire que le fichier généré inclus le code des fichiers appelés);
- des constantes CSS;
- d'autres petites fonctionnalités sympa.

Organisation de mes fichiers sur ce projet:

Le fichier all.css est généré à partir de all.scss, qui contient (j'abrège les infos que j'y ai placé pour documentation):

/*
// Utilisation de Sass dans le cadre de ce projet:
// - Utilisation des constantes définies dans `core/constants.scss`.
// - Utilisation de `@import` pour générer un fichier CSS unique rassemblant
//   tous les styles (bonne pratique de performance web).
// - Masquage des commentaires utilisant la syntaxe `//`.
// - Le fichier Sass de référence est le présent fichier (`all.scss`).
//   Le fichier final est `all.css` (CSS compilé).
*/

// Base, interface globale
@import "core/constants.scss";
@import "core/base.scss";
@import "core/global.scss";

// Styles communs
@import "core/columns.scss";
@import "core/minitabs.scss";

// Styles spécifiques
@import "core/sidebar.scss";
@import "core/home-carrousel.scss";
@import "core/home-teasers.scss";
@import "core/page.scss";

La séparation des styles suit plus ou moins cette logique et cet ordre:
- un fichier avec des constantes (dimensions, couleurs) [spécifique à Sass];
- un fichier adapté de Une feuille de styles de base pour bien démarrer vos projets;
- styles pour l'interface globale: conteneur principal, en-tête, menu, pied de page (un ou plusieurs fichiers selon la complexité);
- styles de «modules» réutilisables sur différentes parties du site (en général un module a un code HTML du type <div class="prefix-nomdumodule">...</div>, où "prefix" est un préfixe de quelques lettres utilisé pour les classes et identifiants des principaux conteneurs sur toutes les pages du site);
- styles pour des types de pages ou pages précises (home, article, listing, etc.), dans plusieurs fichiers si nécessaire.

Les noms des fichiers CSS pourraient à la rigueur être numérotés pour rendre l'ordre plus clair encore, par exemple:
00-constants.scss
10-base.scss
11-global.scss
20-columns.scss
21-minitabs.scss
30-sidebar.scss
31-home-carrousel.scss
32-home-teasers.scss
40-page.scss

Voilà pour un exemple concret.
Ce n'est qu'un exemple, qui reflète une manière de faire... et il y en a quantité d'autres.
Modifié par Florent V. (16 Sep 2010 - 22:04)

Bonjour,

merci, réponse parfaite. J'ai de quoi étudier, ça va beaucoup m'aider !