Seul énorme.fichier css par rapport à plusieurs plus petits spécifiques.les fichiers css?

C'est une question difficile à répondre. Les deux options ont leurs avantages et leurs inconvénients, à mon avis.

Personnellement, je n'aime pas lire un seul énorme fichier CSS, et le maintenir est très difficile. D'un autre côté, le diviser provoque des requêtes http supplémentaires qui pourraient potentiellement ralentir les choses.

Mon avis, serait l'une des deux choses.

1) Si vous savez que votre CSS ne changera jamais une fois que vous l'aurez construit, je construirais plusieurs fichiers CSS en phase de développement (pour lisibilité), puis les combiner manuellement avant d'être mis en service (pour réduire les requêtes http)

2) Si vous savez que vous allez changer votre CSS de temps en temps, et que vous devez le garder lisible, je construirais des fichiers séparés et utiliserais du code (à condition que vous utilisiez une sorte de langage de programmation) pour les combiner à runtime build time (runtime minification/combination est un cochon de ressource).

Avec l'une ou l'autre option, je recommande fortement la mise en cache côté client afin de réduisez encore les requêtes http.

Modifier:
j'ai trouvé ce blog qui montre comment combiner CSS à l'exécution en utilisant rien d'autre que du code. Vaut la peine de jeter un oeil à (bien que je ne l'ai pas encore testé moi-même).

MODIFIER 2:
J'ai décidé d'utiliser des fichiers séparés dans mon temps de conception, et un processus de construction pour réduire et combiner. De cette façon, je peux avoir des css séparés (gérables) pendant que je développe et un fichier minifié monolithique approprié à l'exécution. Et j'ai encore avoir mes fichiers statiques et moins de surcharge système parce que je ne fais pas de compression / minification à l'exécution.

note: pour les acheteurs, je suggère fortement d'utiliser bundler dans le cadre de votre processus de construction. Que vous construisiez à partir de votre IDE ou d'un script de construction, bundler peut être exécuté sur Windows via le exe inclus ou peut être exécuté sur n'importe quelle machine qui exécute déjà node.js.

Je préfère plusieurs fichiers CSS pendant le développement. La gestion et le débogage sont beaucoup plus faciles de cette façon. Cependant, je suggère que come deployment time vous utilisiez à la place un outil CSS minify comme YUI Compressor qui fusionnera vos fichiers CSS en un seul fichier monolithique.

Avoir un seul fichier CSS est préférable pour le temps de chargement de vos pages, car cela signifie moins de requêtes HTTP.

Avoir plusieurs petits fichiers CSS signifie que le développement est plus facile (au moins, je pense que oui: avoir un fichier CSS par module de votre application facilite les choses) .

Donc, il y a de bonnes raisons dans les deux cas...

Une solution qui vous permettra d'obtenir le meilleur des deux idées serait :

• pour développer en utilisant plusieurs petits CSS fichier
  • c'est-à-dire plus facile à développer
• pour avoir un processus de construction pour votre application, qui "combine" ces fichiers en un seul
  • Ce processus de construction pourrait également réduire ce gros fichier, btw
  • cela signifie évidemment que votre application doit avoir des éléments de configuration qui lui permettent de passer du "mode multi-fichiers" au "mode mono-fichier".
• et d'utiliser, en production, uniquement le gros fichier
  • c'est à dire un chargement plus rapide pages

Il y a aussi des logiciels qui combinent des fichiers CSS au moment de l'exécution, et non au moment de la construction; mais le faire à l'exécution signifie manger un peu plus de CPU (et obvisouly nécessite un mécanisme de mise en cache, pour ne pas générer trop souvent le gros fichier)

Vous voulez les deux mondes.

Vous voulez plusieurs fichiers CSS parce que votre santé mentale est une chose terrible à gaspiller.

En même temps, il est préférable d'avoir un seul fichier volumineux.

La solution est d'avoir un mécanisme qui combine les multiples fichiers dans un seul fichier.

Un exemple est quelque chose comme

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

Ensuite, les allcss.le script php gère la concaténation des fichiers et leur distribution.

Idéalement, le script vérifierait les dates de mod sur tous les fichiers, crée un nouveau composite si l'un d'entre eux change, puis renvoie ce composite, puis vérifie les en-têtes HTTP If-Modified afin de ne pas envoyer de CSS redondant.

Cela vous donne le meilleur des deux mondes. Fonctionne très bien pour JS ainsi.

Les feuilles de style monolithiques offrent beaucoup d'avantages (qui sont décrits dans les autres réponses), mais en fonction de la taille globale du document de feuille de style, vous pourriez rencontrer des problèmes dans IE. IE a une limitation avec le nombre de sélecteurs qu'il lira à partir d'un fichier unique. La limite est de 4096 sélecteurs. Si vous êtes feuille de style monolithique aura plus que cela, vous voudrez le diviser. Cette limitation n'élève que sa tête laide dans IE.

Ceci est pour toutes les versions de IE.

Voir Ross Bruniges Blog et MSDN AddRule page.

Il y a un point de basculement auquel il est avantageux d'avoir plus d'un fichier css.

Un site avec 1m + pages, que l'utilisateur moyen est susceptible de ne voir que 5, pourrait avoir une feuille de style de proportions immenses, donc essayer d'économiser la surcharge d'une seule requête supplémentaire par chargement de page en ayant un téléchargement initial massif est une fausse économie.

Étirez l'argument à la limite extrême-c'est comme suggérer qu'il devrait y avoir une grande feuille de style maintenue pour le tout le web. Clairement absurde.

Le point de basculement sera différent pour chaque site, donc il n'y a pas de règle dure et rapide. Cela dépendra de la quantité de css unique par page, du nombre de pages et du nombre de pages que l'utilisateur moyen est susceptible de rencontrer régulièrement lors de l'utilisation du site.

J'ai généralement une poignée de fichiers CSS:

• un fichier CSS "global" pour les réinitialisations et les styles globaux
• fichiers CSS spécifiques"module" pour les pages qui sont logiquement regroupées (peut-être chaque page dans un assistant de paiement ou quelque chose)
• "page" fichiers CSS spécifiques pour les remplacements sur la page (ou, mettre cela dans un bloc sur la page individuelle)

Je ne suis pas vraiment trop préoccupé par les demandes de plusieurs pages pour les fichiers CSS. La plupart des gens ont une bande passante décente et je suis sûr qu'il sont d'autres optimisations qui auraient un impact beaucoup plus grand que de combiner tous les styles en un seul fichier CSS monolitique. Le compromis est entre la vitesse et la maintenabilité, et je penche toujours vers la maintenabilité. Le comperssor Yui semble assez cool cependant, je devrais peut-être vérifier cela.

Peut-être jeter un oeil à boussole, qui est un framework CSS. Il est basé sur Sass donc il prend en charge des choses cool comme les variables, l'imbrication, les mixins et les importations. Les importations sont particulièrement utiles si vous souhaitez conserver des fichiers CSS plus petits mais les combiner automatiquement en 1 (en évitant plusieurs appels HTTP lents). Compass ajoute à cela un grand ensemble de mixins prédéfinis qui sont faciles à manipuler des choses multi-navigateurs. Il est écrit en Ruby mais il peut facilement être utilisé avec n'importe quel système....

Je préfère plusieurs fichiers CSS. De cette façon, il est plus facile d'échanger des "skins" comme vous le désirez. Le problème avec un fichier monolithique, c'est qu'il peut devenir hors de contrôle et difficile à gérer. Que faire si vous voulez des arrière-plans bleus mais ne voulez pas que les boutons changent? Il suffit de modifier votre fichier arrière-plans. Etc.

Voici la meilleure façon:

1. Créez un fichier CSS général avec tout le code partagé
2. Insérez tout le code CSS de page spécifique dans la même page, sur la balise ou en utilisant l'attribut style="" pour chaque page

De cette façon, vous n'avez qu'un seul css avec tout le code partagé et une page html. par le chemin (et je sais que ce n'est pas le bon sujet), vous pouvez aussi encoder vos images en base64 (mais vous pouvez aussi le faire avec vos fichiers js et css). de cette façon, vous réduisez encore plus http demandes à 1.

SASS et LESS font tout cela vraiment un point discutable. Le développeur peut configurer des fichiers de composants efficaces et les combiner tous à la compilation. Dans SASS, vous pouvez désactiver le Mode compressé pendant le développement pour faciliter la lecture et le réactiver pour la production.

Http://sass-lang.com http://lesscss.org

À la fin, un seul fichier CSS minifié est ce que vous voulez quelle que soit la technique que vous utilisez. Moins de CSS, moins de requêtes HTTP, moins de demande sur le serveur.

L'avantage d'un seul fichier CSS est l'efficacité du transfert. Chaque requête HTTP signifie une réponse D'en-tête HTTP pour chaque fichier demandé, et cela prend de la bande passante.

Je sers mon CSS en tant que fichier PHP avec le type mime "text/css" dans L'en-tête HTTP. De cette façon, je peux avoir plusieurs fichiers CSS côté serveur et utiliser PHP includes pour les pousser dans un seul fichier à la demande de l'utilisateur. Chaque navigateur moderne reçoit la .fichier php avec le code CSS et le traite comme un .fichier css.

Vous pouvez simplement utiliser un fichier css pour les performances, puis commenter des sections comme ceci:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

Etc

J'utilise Jammit pour gérer mes fichiers css et utiliser de nombreux fichiers différents pour la lisibilité. Jammit fait tout le sale boulot de combiner et de compresser les fichiers avant le déploiement en production. De cette façon, j'ai beaucoup de fichiers en développement mais un seul fichier en production.

Historiquement, l'un des principaux avantages x d'avoir un seul fichier CSS est l'avantage de vitesse lors de l'utilisation de HTTP1.1.

Cependant, en mars 2018, plus de 80% des navigateurs prennent désormais en charge HTTP2. HTTP2 permet au navigateur de télécharger plusieurs ressources simultanément tout en étant capable de pousser les ressources de manière préventive. Avoir un seul fichier CSS pour toutes les pages signifie une taille de fichier plus grande que nécessaire. Avec une conception appropriée, Je ne vois aucun avantage à faire cela autre que son plus facile à code.

La conception idéale pour HTTP2 pour de meilleures performances serait: - Avoir un fichier CSS de base qui contient des styles communs utilisés sur toutes les pages. - Avoir CSS spécifique à la page dans un fichier séparé - Utilisez HTTP2 push CSS pour minimiser le temps d'attente (un cookie peut être utilisé pour éviter les poussées répétées) - Éventuellement séparer au-dessus du CSS pli et pousser ce premier et charger le CSS restant plus tard (utile pour les appareils mobiles à faible bande passante) -Vous pouvez également charger CSS restant pour le site ou des pages spécifiques après le la page a été chargée si vous souhaitez accélérer les futurs chargements de pages.

J'ai créé une approche systématique du développement CSS. De cette façon, je peux utiliser une norme qui ne change jamais. J'ai d'abord commencé avec le système de grille 960. Ensuite, j'ai créé des lignes simples de css pour les mises en page de base, les marges, le remplissage, les polices et les tailles. Je les ficelle ensuite ensemble au besoin. Cela me permet de garder une mise en page cohérente dans tous mes projets et d'utiliser les mêmes fichiers css encore et encore. Parce qu'ils ne sont pas spécifiques. Voici un exemple: - - - - div class = "C12 bg0 M10 P5 white FL"/div--- Cela signifie que le conteneur est 12 colonnes à travers, utilise bg0 a des marges de remplissage 10px de 5 le texte est blanc et il flotte à gauche. Je pourrais facilement changer cela en supprimant ou en ajoutant un nouveau - ce que j'appelle un style "léger" - au lieu de créer une seule classe avec tous ces attributs; je combine simplement les styles uniques lorsque je code la page. Cela me permet de créer n'importe quelle combinaison de styles et ne limite pas ma créativité ou me fait créer un nombre massif de styles qui sont similaires. Votre les feuilles de style deviennent beaucoup plus gérables, minimisées et vous permettent de les réutiliser encore et encore. Cette méthode que j'ai trouvée fantastique pour la conception rapide. Je ne conçois plus d'abord dans PSD mais dans le navigateur, ce qui permet également de gagner du temps. En outre, parce que j'ai également créé un système de nommage pour mes arrière-plans et les attributs de conception de page, je change simplement mon fichier image lors de la création d'un nouveau projet.(bg0 = fond de corps selon mon système de nommage) cela signifie que si j'avais auparavant un blanc arrière-plan avec un projet simplement le changer en noir signifie simplement que sur le prochain projet bg0 sera un fond noir ou une autre image..... Je n'ai encore rien trouvé de mal avec cette méthode et cela semble très bien fonctionner.

Une feuille de style groupée peut enregistrer les performances de chargement de la page, mais plus il y a de styles, plus le navigateur rend lentement les animations sur la page sur laquelle vous vous trouvez. Ceci est causé par l'énorme quantité de styles inutilisés qui peuvent ne pas être sur la page, mais le navigateur a encore à calculer.

Voir: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Avantages des feuilles de style groupées: - performances de chargement des pages

Livré inconvénients des feuilles de style: - un comportement plus lent, qui peut provoquer des choppyness pendant le défilement, l'interactivité, l'animation,

Conclusion: Pour résoudre les deux problèmes, pour la production, la solution idéale est de regrouper tous les css en un seul fichier pour enregistrer les requêtes http, mais utilisez javascript pour extraire de ce fichier, le css de la page sur laquelle vous vous trouvez et mettre à jour la tête avec.

Savoir quels composants partagés sont nécessaires par page, et pour réduire la complexité, il serait sympa avoir déclaré tous les composants que cette page utilise-par exemple:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">