Comment stucturer les CSS ? Un seul ou plusieurs fichiers ?

Bonjour,

Je dois réaliser les CSS d'un site dont les pages se composent de 3 zones: header, main et footer.
Les zones Header et footer sont communes à toutes les pages.
Par contre la structure du main ne l'est pas. Par exemple, le nombre de colonnes peut varier d'une page à l'autre.

J’entrevois deux moyens de structurer les CSS :
- une seule CSS pour tout le site (définitions pour header, footer et toutes les possibilités structurelles de main)
- une CSS regroupant les définitions communes (header + footer) et une autres pour chaque possibilité structurelle de main. Seule celle qui correspond à la page visitée serait téléchargée.

La deuxième solution permet d'éviter le téléchargement de styles correspondants à des pages qui ne seront peut-être pas visitée.
Par contre, la première permet peut-être de télécharger les styles spécifiques à une page avant qu’elle ne soit consultée ce qui contribuerait à accélérer son affichage.

Quelle approche vaut-il mieux avoir ?
Dans le cas d'une seule CSS qui contient toutes les informations, les images de fonds propre à une page peuvent-elles être téléchargée avant la consultation de la page (une sorte de preload quoi) ?

Avez-vous d'autres conseils ou des sources quant à la structure des CSS ?

Merci

Salut,

Personnellement, je me dis que quand tu fais ta feuille de style
- en utilisant le maximum d'héritage au lieu de multiplier les id et les class,
- que tu condense au maximum les propriétés en utilisant les fonctions raccourcies,
- que tu n'as pas de redondance dans ton code, etc.

Tu peux très certainement utiliser une seule et unique feuille de style, car en terme de poids de fichier cela n'alourdira pas plus que ca l'ouverture du site.
En plus tu n'auras qu'un fichier à gérer lors de mise à jours de styles, ce qui simplifie la tâche de ne pas avoir à tout retrouver dans différents fichiers.

Peut être que ceci est moins vrai pour un "gros" site commercial ou très élaboré, mais je suis persuadé que ca reste quand même une solution commode.

Pour le preload des images, j'ai lu un post qui disait comment faire, il faut que je le retrouve... Une histoire d'images positionnées hors du cadre du navigateur. Les images sont ainsi chargées car appelées par la feuille de style, mais elles n'apparaissent pas (car elles sont positionnées à -5000px -5000px par exemple...)

Merci pour ton avis

a écrit :
Peut être que ceci est moins vrai pour un "gros" site commercial ou très élaboré

Il s'agit d'un site commercial. Il a été développer sans aucun soucis de mise aux standards et je suis chargé de rectifier le tir du mieux possible.

a écrit :
Pour le preload des images, ...Les images sont ainsi chargées car appelées par la feuille de style, mais elles n'apparaissent pas...

Je ne pensais pas à ce genre de preload et il s'agit pas du but principal.
Je me demandais simplement si, lorsque la CSS contient des définitions d'images de fond, ces images sont téléchargée avec la CSS où s'il faut attendre qu'elle soit réellement utilisées dans la page en cours.

Bref, si je place tous les background-image de mon site dans un CSS, est-ce que toutes les images de fonds seront téléchargées directement ou fautdra-t-il attendre que le visiteur se rende sur les pages en questions ?

Sauf méconnaissance de ma part, à priori le chargement de l'image ne se fait que lorsque la propriété CSS y fait appel. S'il existe un moyen de les faire charger à l'avance je ne le connais pas, désolé.

Je me permet de faire un petit up avant que ce sujet ne sombre dans les baysses.
Quelqu'un a-t-il un autre avis sur la stucturation des styles ou tout le monde est d'accord avec Mikachu ?

Merci

Mathieu_vd a écrit :
Dans le cas d'une seule CSS qui contient toutes les informations, les images de fonds propre à une page peuvent-elles être téléchargée avant la consultation de la page (une sorte de preload quoi) ?

Bonjour,
Non ce n'est pas le cas pour les images en background. Même si tu mets une image de fond sur a:hover, l'image ne sera pas téléchargées tant qu'il n'y aura pas eu de survol d'un lien. A fortiori, si l'élément visé n'est même pas sur la page.
Donc en gros, l'un ou l'autre ça ne change pas grand chose.
Modifié par Alan (13 Jun 2006 - 14:56)

Ok. Merci pour ta réponse.
Mais mon vrai problème est au niveau de la structure de mes CSS.
Cette histoire de preload n'était qu'une sous question (et j'aurais mieux fait de la poster dans un autre sujet... désilé pour la confusion)

Je vai donc reposer ma véritable question:

Dans un site de grande envergure, vaut-il mieux placer les définitions de style de tous le site dans un seul fichier ou est-il préférable de faire un fichier général et de le compléter avec un autre qui contient les éléments propres à la page consultée ?

Si ma question n'est pas assez claire, dites le moi et j'essayerai de la posée différement...

Merci

Bonjour Mathieu_vd,

Je me pose actuellement la même question que toi, nous devons avoir les même raisonnements :

- une feuille de style ne gérant que les généralitées, séparée des spécificitées des différentes pages, ne serait donc chargée qu'une seule fois, dés la visite d'une page (peu importe la-quelle) et ce, plus rapidement que si elle comportait tout les styles. Cela accélererai donc l'affichage du site.

- Chaque page spécifique aurait sa propre feuille de style et cela faciliterait les éventuelles modifications puisque les styles à retoucher ne seraient pas perdus dans une longue suite de déclarations.

Pourtant :

- n'est-il pas plus simple de n'avoir qu'un seul document structuré en autant de séctions que nécessaire, plutot que plusieurs fichiers .css ?

- un temps de chargement aura forcement lieu à la connexion, le gain de la séparations des feuilles de styles se fera-t-il vraiment sentir ? Cela en vaut-il vraiment la peine ? Je commence à en douter.

- enfin j'ai lu sur le forum une proposition de Laurent_Denis que je résumerai à ceci :

* A chaque page qui doit avoir une spécificité, on donne un identifiant à la balise <body>, prenons par exemple <body id="catalogue">

* Dans la feuille de style, toutes les déclarations ciblant les spécificités de cette page prendrons en compte cette id --> #catalogue #main h1 {...}

Personnellement, c'est cette solution que je vais appliquer : une seule feuille de style srtucturée en autant de parties que nécessaire.

Toutefois, si un érudit peut nous donner son avis sur la pertinance de la séparation des feuille de styles dans notre cas, ses lumières sont plus que bienvenues

Bonjour Hermes,

Je suis désolé de te répondre si tard...

Avec un peu de recul, je pense en effet que l'utilisation d'une seule feuillle de style est préférable (surtout pour une question de maintenance).
Les conseils de Laurent Denis me semble également très pertinant (comme d'hab ). Je vai essayé de retrouver son intervention et d'en indiquer le lien.

Edit: Pas moyen de retrouver le sujet
Quelqu'un pourrait-il remettre la main dessus ?

Merci
Modifié par Mathieu_vd (16 Aug 2006 - 11:21)

Bonjour,

si les différences sont relativement limitées en terme de nombre de classes, 1 seul fichier sera très bien.

Par contre je préfère largement dissocier les style 'inventés' pour les spécificités d'un site de ceux habituellement nécessaires à l'outils sous jacent. Mais là je parle de l'emploi d'un CMS.