Un seul fichier .css énorme par rapport à plusieurs fichiers .css spécifiques plus petits? [fermé]

Y a-t-il un avantage à avoir un seul fichier monstre .css contenant des éléments de style qui seront utilisés sur presque toutes les pages?

Je pense que pour faciliter la gestion, j'aimerais retirer différents types de CSS dans quelques fichiers, et inclure chaque fichier dans mon fichier principal <link />est-ce mauvais?

Je pense que c'est mieux

1. positions.css
2. buttons.css
3. tables.css
4. copy.css

contre.

1. site.css

Avez-vous vu des problèmes avec le faire d'une manière contre l'autre?

Un compilateur CSS comme Sass ou LESS est une excellente façon de procéder. De cette façon, vous serez en mesure de fournir un seul fichier CSS minimisé pour le site (qui sera beaucoup plus petit et plus rapide qu'un fichier source CSS normal), tout en conservant l'environnement de développement le plus agréable, avec tout parfaitement divisé en composants.

Sass et LESS ont l'avantage supplémentaire de variables, d'imbrication et d'autres façons de rendre CSS plus facile à écrire et à maintenir. Hautement recommandé. Personnellement, j'utilise maintenant Sass (syntaxe SCSS), mais j'ai utilisé MOINS auparavant. Les deux sont excellents, avec des avantages similaires. Une fois que vous avez écrit CSS avec un compilateur, il est peu probable que vous souhaitiez vous en passer.

http://lesscss.org

http://sass-lang.com

Si vous ne voulez pas jouer avec Ruby, ce compilateur MOINS pour Mac est génial:

http://incident57.com/less/

Ou vous pouvez utiliser CodeKit (par les mêmes gars):

http://incident57.com/codekit/

WinLess est une interface graphique Windows pour compiler MOINS

http://winless.org/

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

Personnellement, je n'aime pas lire un seul fichier CSS ÉNORME, et le maintenir est très difficile. D'un autre côté, le fractionnement entraîne des demandes http supplémentaires qui pourraient potentiellement ralentir les choses.

Mon opinion serait l'une des deux choses.

1) Si vous savez que votre CSS ne changera JAMAIS une fois que vous l'avez construit, je construirais plusieurs fichiers CSS au stade du développement (pour plus de lisibilité), puis les combiner manuellement avant de passer en direct (pour réduire les demandes 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 d'utiliser une sorte de langage de programmation) pour les combiner à temps de construction du runtime (la minification / combinaison du runtime est un pig de ressource).

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

EDIT:
J'ai trouvé ce blog qui montre comment combiner CSS à l'exécution en utilisant uniquement du code. Cela vaut la peine d'y jeter un coup d'œil (même si je ne l'ai pas encore testé moi-même).

EDIT 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 bon fichier minifié monolithique au moment de l'exécution. Et j'ai toujours mes fichiers statiques et moins de surcharge système car je ne fais pas de compression / minification au moment de l'exécution.

Remarque: pour vous, acheteurs, je suggère fortement d'utiliser le bundler dans le cadre de votre processus de construction. Que vous construisiez à partir de votre IDE, ou à partir d'un script de construction, le bundler peut être exécuté sur Windows via le inclus exeou 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 qu'au moment du déploiement, vous utilisez à la place un outil de réduction CSS comme YUI Compressor qui fusionnera vos fichiers CSS en un seul fichier monolithique.

Vous voulez les deux mondes.

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

Dans le 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 fichiers multiples en 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, le script allcss.php gère la concaténation des fichiers et leur remise.

Idéalement, le script vérifierait les dates de modification sur tous les fichiers, créerait 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 également très bien pour JS.

Avoir un seul fichier CSS est meilleur 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 (du 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 permettrait de tirer le meilleur parti des deux idées serait:

• Pour développer en utilisant plusieurs petits fichiers CSS
  • 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 pour utiliser, en production, uniquement le gros fichier
  • c'est-à-dire un chargement plus rapide des pages

Il existe également des logiciels qui combinent les fichiers CSS au moment de l'exécution et non au moment de la construction; mais le faire au moment de l'exécution signifie manger un peu plus de CPU (et nécessite évidemment un certain mécanisme de mise en cache, pour ne pas recréer trop souvent le gros fichier)

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

Cependant, en mars 2018, plus de 80% des navigateurs prennent désormais en charge HTTP2, ce qui permet au navigateur de télécharger plusieurs ressources simultanément et de pouvoir 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 à le faire autre que sa plus facile à coder.

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 un 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)
• Séparez éventuellement au-dessus du CSS et pliez-le d'abord et chargez le CSS restant plus tard (utile pour les appareils mobiles à faible bande passante)
• Vous pouvez également charger le CSS restant pour le site ou des pages spécifiques après le chargement de la page si vous souhaitez accélérer les futurs chargements de page.

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

C'est pour toutes les versions d'IE.

Voir le blog de Ross Bruniges et la page MSDN AddRule .

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

Un site avec 1M + de pages, dont l'utilisateur moyen ne verra probablement que 5, pourrait avoir une feuille de style aux proportions immenses, donc essayer d'économiser la surcharge d'une seule demande supplémentaire par chargement de page en ayant un téléchargement initial massif est faux économie.

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

Le point de basculement sera différent pour chaque site, il n'y a donc pas de règle stricte et rapide. Cela dépendra de la quantité de CSS uniques 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
• "css" des fichiers css spécifiques pour les pages qui sont regroupées logiquement (peut-être chaque page dans un assistant de paiement ou quelque chose)
• "css" des fichiers css spécifiques pour les remplacements sur la page (ou, mettez 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 existe d'autres optimisations qui auraient un impact beaucoup plus important que la combinaison de tous les styles dans un fichier CSS monolitique. Le compromis est entre la vitesse et la maintenabilité, et je penche toujours vers la maintenabilité. Le compresseur YUI semble plutôt cool, je devrais peut-être vérifier cela.

Je préfère plusieurs fichiers CSS. De cette façon, il est plus facile d'échanger des "skins" à l'intérieur et à l'extérieur comme vous le souhaitez. Le problème avec un fichier monolithique est qu'il peut devenir incontrôlable et difficile à gérer. Que faire si vous voulez des arrière-plans bleus mais ne voulez pas que les boutons changent? Modifiez simplement votre fichier d'arrière-plan. Etc.

Jetez peut-être un œil à la boussole , qui est un cadre de création CSS open source. Il est basé sur Sass , il prend donc en charge des choses intéressantes 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 à gérer des trucs multi-navigateurs. Il est écrit en Ruby mais il peut facilement être utilisé avec n'importe quel système ....

voici le meilleur moyen:

1. créer un fichier css général avec tout le code partagé
2. insérer 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. au fait (et je sais que ce n'est pas le bon sujet) vous pouvez également 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 de requêtes http à 1.

SASS et LESS font de tout cela un point discutable. Le développeur peut configurer des fichiers de composants efficaces et les compiler lors de la compilation. Dans SASS, vous pouvez désactiver le mode compressé pendant le développement pour une lecture plus facile et le réactiver pour la production.

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

En fin de compte, 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 fichier CSS unique est l'efficacité du transfert. Chaque demande 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 inclut pour les pousser dans un seul fichier à la demande de l'utilisateur. Chaque navigateur moderne reçoit le 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 celle-ci:

/******** 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 plus de lisibilité. Jammit effectue tout le sale travail de combinaison et de compression des fichiers avant le déploiement en production. De cette façon, j'ai de nombreux fichiers en développement mais un seul fichier en production.

Une feuille de style intégrée peut enregistrer les performances de chargement de la page, mais plus il y a de styles, plus le navigateur rend les animations lentes sur la page sur laquelle vous vous trouvez. Cela est dû à l'énorme quantité de styles inutilisés qui peuvent ne pas être sur la page sur laquelle vous vous trouvez, mais le navigateur doit encore calculer.

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

Avantages des feuilles de style fournies: - performances de chargement des pages

Inconvénients des feuilles de style groupées: - comportement plus lent, ce qui peut provoquer des saccades 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 dans un fichier pour enregistrer sur 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 .

Pour savoir quels composants partagés sont nécessaires par page et pour réduire la complexité, il serait bien d'avoir déclaré tous les composants que cette page particulière utilise - par exemple:

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

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 rembourrage, les polices et les tailles. Je les enchaîne ensuite au besoin. Cela me permet de conserver une mise en page cohérente dans tous mes projets et d'utiliser les mêmes fichiers CSS à plusieurs reprises. 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 de 12 colonnes, utilise bg0 a des marges de 10px de 5, le texte est blanc et il flotte la 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 en codant la page. Cela me permet de créer n'importe quelle combinaison de styles et ne limite pas ma créativité ni ne me fait créer un grand nombre de styles similaires. Vos feuilles de style deviennent beaucoup plus gérables, minimisées et vous permettent de les réutiliser encore et encore. J'ai trouvé cette méthode fantastique pour une conception rapide. Je ne conçois plus non plus d'abord dans PSD mais dans le navigateur qui fait aussi gagner du temps. De plus, parce que j'ai également créé un système de nommage pour mes arrière-plans et attributs de conception de page, je change simplement mon fichier image lors de la création d'un nouveau projet. (Bg0 = arrière-plan du corps selon mon système de nommage) Cela signifie que si j'avais précédemment un blanc arrière-plan avec un projet le changer simplement en noir signifie simplement que sur le prochain projet bg0 sera un fond noir ou une autre image .....