Un fichier CSS ou des fichiers CSS individuels pour chaque page?

Question

Lorsque je crée des pages, est-ce que je veux avoir des feuilles de style individuelles pour chaque page ou une grande feuille de style pour tout le site? Pour des raisons de chargement, des fichiers individuels ne seraient-ils pas une meilleure pratique car ce serait moins de css total au chargement?

Answer 1

Utilisez un seul fichier, les fichiers CSS sont mis en cache, ce qui évite de télécharger un nouveau fichier pour chaque nouvelle page visitée.

Pour vous aider, je claque généralement mon CSS à travers un nettoyeur CSS afin de réduire la taille de son fichier. Vous pouvez également GZip CSS utilise également .htaccess , ce qui le rend encore plus petit.

Enfin, placer tous les CSS dans un seul fichier facilitera les modifications de la présentation à l’échelle du système (la raison pour laquelle nous utilisons CSS en premier lieu), cela facilitera également le débogage.

Modifier, mai 2017

Beaucoup de choses ont changé en plus de 7 ans, et ceux qui consultent cette réponse devraient envisager de rechercher de nouvelles méthodes de transmission d'actifs. En particulier, l'utilisation de HTTP2 et des pré-processeurs est plus courante.

Answer 2

Une suggestion différente: utiliser plusieurs feuilles de style pendant le développement et disposer d’un mécanisme qui fusionnera toutes les feuilles de style dans un seul fichier CSS pour le déploiement en production. Cela peut nécessiter un peu de codage supplémentaire et des scripts supplémentaires à exécuter avant le déploiement en production, mais serait idéal pour une utilisation à la fois de développement et de production. Si le processus est correctement automatisé (ce qui n'est pas très difficile à réaliser), cela ne provoquera pas non plus d'erreur.

Answer 3

Le but principal de la feuille de style est de vous permettre de modifier le design sur toutes vos pages. Si vous avez h1 {color:red;} sur chaque page et que vous souhaitez le modifier ultérieurement en bleu, vous devez modifier la feuille de style de chaque page. Avec une seule feuille de style, vous pourrez changer la couleur et la refléter sur l’ensemble du site.

De plus, la feuille de style sera mise en cache sur l'ordinateur de l'utilisateur plutôt que téléchargée à partir de chaque page.

Answer 4

Si vous souhaitez un style cohérent sur toutes les pages de votre site Web, utilisez une seule feuille de style pour tous les styles courants. Sinon, vous aurez peut-être du mal à conserver de nombreuses feuilles de style. Des modifications devront être ajoutées à chacune des feuilles de style.

Les feuilles de style utilisées uniquement sur une seule page peuvent être insérées dans des feuilles de style distinctes. Cela peut être très utile pour les feuilles de style volumineuses à page unique et / ou les feuilles de style pour les pages Web rarement consultées.

Vos feuilles de style ne seront pas rechargées à chaque actualisation de page. Si vous faites référence à la grande feuille de style polyvalente de votre page d'accueil, elle ne sera téléchargée qu'une seule fois et mise en cache pour une utilisation ultérieure.

Answer 5

& "; Pour le chargement, vous ne voudriez pas d'une feuille de style plus petite, par conséquent, en créer une est une meilleure pratique? &";

Cela peut avoir un effet inverse, car en utilisant une feuille de style, il peut être mis en cache puis rechargé facilement, alors qu'il charge en permanence un nouveau fichier CSS pour chaque page avec votre méthode.

La plupart des sites n'ont pas besoin de plusieurs feuilles de style pour un type de support. Toutefois, si la conception de votre site varie considérablement, je vous conseillerais de créer une feuille de style de base contenant toutes les propriétés communes, puis une feuille de style secondaire pour chacune des pages contenant les différences.

Cela ne devrait être utilisé que si les modifications CSS sont suffisamment grandes pour justifier l’utilisation de feuilles de style distinctes.

Answer 6

Étant donné que je suis en réalité un programmeur Web (programme de programmation Web de Java, pas de script comme PHP), je dois vous donner un avis. Je n'ai jamais vu de concepteur Web donner:

Allez-y, divisez vos fichiers CSS en plusieurs partitions logiques dans la mesure du possible! Si vous avez un tableau très stylisé, rassemblez son contenu CSS dans un fichier, puis collectez les styles de base de la page dans un autre fichier, ajoutez ces CSS de navigation dans les menus: s au troisième, etc. Vous pouvez bien sûr réutiliser des CSS individuels: s où ils sont pertinents, mais NE PAS ne mettre que tout dans un gros fichier!

Answer 7

Je suis tombé sur ce fil en cherchant la même question .. Ma pensée était de structurer comme ça ..

Layout.css < --- pour la structure du site, les liens, les en-têtes, etc. communs au site. form.css < - styles de formulaire génériques reset.css < - tout le document est réinitialisé si vous les utilisez

et j'utilise actuellement pages.css pour tous les styles de page ..

ou

homepage.css about.css gallery.css