Discussion :

[zooffy]

Bonjour à tous.

Si j'ai bien compris le fonctionnement des Navigateurs, lorsqu'il y a un fichier CSS de déclaré dans le code d'une page d'un site, il y a téléchargement du fichier CSS sur le poste du client.

Alors ma question est purment empirique, indépendament des cas particuliers, est il plus efficace de :
- faire un gros fichier CSS unique avec tout dedans en ce disant que le visiteur reviendra et donc le retrouvera dans son historique (en espérant qu'il ne le vide pas en permanence)
- faire des fichiers plus petits, spécifique à chaque cas dans la page concerné
- mettre le codage CSS directement dans la balsie <style> de la page et ne gérer que les classes CSS dont on a besoins
- exploiter la propriété Style de la plupart des balise HTML ?

Ma question porte que les perfomances pures et dures, mais les avis sur la "propreté" d'un tel codage m'interresse également.

Merci et bonne journée.

[polymorphisme]

Bonjour zooffy,

la tendance actuelle est de séparer le fond de la forme, donc de décrire les règles de styles dans une feuille de style CSS distincte du fichier HTML.

Pour les questions de performances, je ne saurais répondre.

[zooffy]

Merci pour ton aide. Donc cela écarte deux de mes quatre propositions.

Reste à voir les perf entre gros fichier et petits fichiers.

Mais je suis bien conscient que ma question est à moitié pourrie.

[jpvincent]

pour la perf pure, il y a 2 stratégies majeures, et il y a de la place pour des variantes :

- tu as beaucoup de visiteurs qui arrivent sans cache sur ta page, et cette page est hyper importante, tu as même une équipe dédiée pour la gérer. C'est le cas des homes de Google et de Yahoo! tu as alors intérêt à mettre JS et CSS inline pour avoir un rendu non bloquant et très rapide

- la majorité de tes utilisateurs reviennent avec un cache : tu t'appelles facebook (plusieurs visites par semaine) ou Amazon (enchaînement de pages pour visiter la boutique), tu as donc intérêt à centraliser tes CSS dans un seul fichier pour que tes visiteurs le gardent en cache

Ensuite viennent les stratégies intermédiaires, qui demandent des développements spécifiques :
- tu as une page d'entrée unique façon facebook et son login : tu mets le minimum de JS / CSS et même images inline, du coup ta page de login s'affiche en moins d'une demie seconde. Une fois la page affichée, tu peux pré-charger tous les JS/CSS qui lui seront utiles sur les pages d'après (et ça peut faire 1Mo facilement)

- tu as une page façon Application Web : 1 seule page dans laquelle tout ton site se trouve (google maps, docs, twitter, nouvelle HP Yahoo! ...). Il faut alors afficher très vite quelque chose (CSS+JS inline) et aller chercher les dépendances JS/CSS au fur et à mesure des besoins

Globalement je déconseille le split des CSS/JS en petits fichiers : ce qui plombe les perfs, c'est le nombre de requêtes HTTP, ça n'est plus le poids. Mieux vaut donc un fichier massif que plusieurs petits.

Charger un CSS spécifique pour une page peut aussi être pas mal mais demande beaucoup de maîtrise, je connais peu de cas où c'est maintenable, et pour être efficace, il faudrait pré-charger les autres CSS pour que le visiteur ait en cache les fichiers des autres pages

ça ira comme réponse ?

[zooffy]

Merci pour ton explication trés claire.

Je pense que pour l'instant je vais rester sur un gros fichier CSS et analyser les visites de mes sites.

Je me trouve dans le cas de la page unique. MES sites sont fait sur une seule et unique page (au sens fichier du terme).
En gros, j'ai une page default.aspx qui est appellée par tous les noms de domaine enregistrés. Cette page commence par analayser le nom de domaine qui l'appelle, plonge en BDD pour savoir quelle est la page par défaut du site et ensuite replonge en BDD pour trouver les modules qu'elle doit afficher.
Ensuite, au fil de la navigation, elle plonge en BDD pour charger les module concernés.

Chaque module a des appels de classes CSS pour gérer ces contrôles et j'ai (pour l'instant) fait toutes les déclarations dans le même fichier CSS.
Maintenant, je pense que la plupart des visiteurs de mes sites sont en gestion du cache par défaut.

En tout cas, merci à toi.

[jpvincent]

attention à ne pas confondre page unique (URL) pour le client avec ton fichier d'aiguillage unique
une bonne tactique pour préparer l'avenir (lorsque ton CSS sera tellement massif que tu voudras le spliter), c'est de faire une feuille de style par module. Ca permet d'être mieux organisé dans son code, et pour le moment tu n'as qu'à servir une concaténation de tous ces petits fichiers.
Et lorsque tu sentiras qu'une gestion plus fine deviendra nécessaire, tu auras alors les mains libres pour moduler les feuilles que tu sers