Un seul fichier .css énorme contre plusieurs fichiers .css spécifiques plus petits?
Y at-il un avantage à avoir un seul fichier .css monstre contenant des éléments de style qui seront utilisés sur presque toutes les pages?
Je pense que pour faciliter la gestion, j'aimerais extraire différents types de CSS dans quelques fichiers et inclure chaque fichier dans mon <link /> principal, est-ce si grave?
Je pense que c'est mieux
- positions.css
- boutons.css
- tables.css
- copy.css
vs.
- site.css
Avez-vous vu des pièges à faire d'une manière ou d'une autre?
Un compilateur CSS comme Sass ou LESS est un excellent moyen d’aller. De cette façon, vous pourrez 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 le meilleur environnement de développement, avec tout ce matériel parfaitement scindé en composants.
Sass et LESS ont l’avantage supplémentaire de variables, imbrication et autres moyens de faciliter l’écriture et la maintenance de CSS. Fortement recommandé. Personnellement, j'utilise Sass (syntaxe SCSS) maintenant, mais auparavant, MOINS. 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.
Si vous ne voulez pas jouer avec Ruby, ce compilateur LESS pour Mac est génial:
Ou vous pouvez utiliser CodeKit (par les mêmes gars):
http://incident57.com/codekit/
WinLess est une interface graphique Windows pour comipiling LESS
C'est un dur à répondre. Les deux options ont leurs avantages et leurs inconvénients à mon avis.
Personnellement, je n'aime pas beaucoup lire un seul fichier CSS, et le maintenir est très difficile. D'autre part, son fractionnement entraîne des demandes HTTP supplémentaires qui pourraient éventuellement 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 la lisibilité), puis je les combinerais manuellement avant de les mettre en ligne (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 construirai des fichiers séparés et utiliserai du code (à condition que vous utilisiez une sorte de langage de programmation) pour les combiner à runtime temps de construction (la minification d’exécution/la combinaison est une ressource).
Avec l'une ou l'autre option, je recommanderais fortement la mise en cache côté client afin de réduire davantage le nombre de requêtes http.
MODIFIER:J'ai trouvé ce blog qui montre comment combiner CSS au moment de l'exécution en utilisant uniquement du code. Cela vaut la peine de jeter un coup d'œil (même si je ne l'ai pas encore testé moi-même).
EDIT 2:
J'ai opté pour des fichiers distincts au moment de la conception et un processus de construction pour réduire et combiner. De cette manière, je peux avoir des fichiers CSS distincts (gérables) pendant que je développe et un fichier monifié monolithique approprié au moment de l'exécution. Et j'ai toujours mes fichiers statiques et moins de charge système, car je ne fais pas de compression/minification au moment de l'exécution.
note: pour vos acheteurs, je suggère fortement d'utiliser bundler dans le cadre de votre processus de construction. Que vous créiez à partir de votre IDE ou d'un script de construction, bundler peut être exécuté sous Windows via la exe incluse ou peut être exécutée sur tout ordinateur qui exécute déjà node.js.
Je préfère plusieurs fichiers CSS au cours du développement. La gestion et le débogage sont beaucoup plus faciles de cette façon. Cependant, je suggère que, au moment du déploiement, vous utilisiez plutôt un outil de réduction de CSS, tel que YUI Compressor , qui fusionnera vos fichiers CSS dans un 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 (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 de ces deux idées serait:
- Développer en utilisant plusieurs petits fichiers CSS
- c'est-à-dire plus facile à développer
- Pour avoir un processus de construction pour votre application, cela "combine" ces fichiers en un
- Ce processus de construction pourrait également réduire ce gros fichier, btw
- Cela signifie évidemment que votre application doit disposer de quelques éléments de configuration lui permettant de passer du "mode multi-fichiers" au "mode mono-fichier".
- Et pour utiliser, en production, uniquement le gros fichier
- chargement plus rapide des pages
Certains logiciels combinent également des 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 temps processeur (et nécessite visiblement un mécanisme de cache, pour ne pas générer trop souvent le gros fichier)
Vous voulez les deux mondes.
Vous voulez plusieurs fichiers CSS car 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 consiste à mettre en place un mécanisme combinant plusieurs 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, le script allcss.php gère la concaténation des fichiers et leur livraison.
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 changeait, puis le renvoyait, puis vérifiait 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 bien pour JS.
Les feuilles de style monolithiques offrent de nombreux avantages (décrits dans les autres réponses). Toutefois, en fonction de la taille globale du document de feuille de style, des problèmes peuvent survenir dans IE. IE a une limite quant au nombre de sélecteurs lus à partir d'un fichier unique. La limite est de 4096 sélecteurs. Si vous avez une feuille de style monolithique, vous voudrez la séparer. Cette limitation ne fait que soulever la tête laide dans IE.
Ceci est pour toutes les versions d'IE.
Voir Blog de Ross Bruniges et Page MSDN AddRule .
Il y a un point critique à partir duquel il est avantageux d'avoir plusieurs fichiers CSS.
Un site avec plus de 1 million de pages, que l'utilisateur moyen ne verra probablement que 5 fois, pourrait avoir une feuille de style aux proportions immenses. Il est donc faux d'essayer d'économiser le temps système d'une seule requête supplémentaire par chargement de page en effectuant un téléchargement massif. économie.
Étendre l'argument à l'extrême limite - c'est comme suggérer qu'il devrait y avoir une grande feuille de style maintenue pour tout le Web. Clairement absurde.
Le point de basculement sera différent pour chaque site, de sorte qu'il n'y a pas de règle absolue. Cela dépend de la quantité de fichiers CSS uniques par page, du nombre de pages et du nombre de pages qu'un 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
- "module" fichiers css spécifiques pour les pages qui sont regroupées de manière logique (peut-être chaque page d'un assistant de validation ou quelque chose du genre)
- "page" des fichiers css spécifiques pour les remplacements sur la page (ou, mettez ceci dans un bloc sur la page individuelle)
Je ne suis pas trop préoccupé par les demandes de pages multiples pour les fichiers CSS. La plupart des gens ont une bande passante convenable et je suis sûr que d'autres optimisations auraient un impact bien plus important que la combinaison de tous les styles dans un fichier CSS monolitique. Le compromis est entre la rapidité et la maintenabilité, et je penche toujours pour la maintenabilité. Le compilateur YUI a l'air plutôt cool, il faudra peut-être que je vérifie.
Regardez peut-être compass , qui est un framework de création CSS open source. Il est basé sur Sass donc il supporte des choses sympas comme les variables, l’imbrication, les mixins et les imports. Les importations sont particulièrement utiles si vous souhaitez conserver des fichiers CSS plus petits mais les combiner automatiquement en 1 (évite les appels HTTP lents) . Les éléments du navigateur . Il est écrit en Ruby, mais il peut facilement être utilisé avec n’importe quel système ....
Historiquement, l'un des principaux avantages d'un fichier CSS unique est l'avantage de la rapidité d'utilisation de HTTP1.1.
Cependant, depuis mars 2018, plus de 80% des navigateurs prennent en charge HTTP2. HTTP2 permet au navigateur de télécharger plusieurs ressources simultanément et d’être capable de transférer des ressources de manière préemptive. Avoir un seul fichier CSS pour toutes les pages signifie une taille de fichier supérieure à celle requise. Avec une conception appropriée, je ne vois aucun avantage à le faire, si ce n’est plus facile à coder.
La conception idéale de HTTP2 pour de meilleures performances serait: - Avoir un fichier CSS principal contenant les styles communs utilisés sur toutes les pages .- Avoir un CSS spécifique à la page dans un fichier séparé - Utiliser HTTP2 Push CSS à minimiser le temps d'attente (un cookie peut être utilisé pour éviter les envois répétés) - Facultativement, séparez les CSS au-dessus du pli et appuyez dessus en premier, puis chargez le CSS restant (utile pour les appareils mobiles à faible bande passante) - Vous pouvez également chargez le CSS restant pour le site ou des pages spécifiques après le chargement de la page si vous souhaitez accélérer le chargement des pages.
Je préfère plusieurs fichiers CSS. De cette façon, il est plus facile d’échanger les "peaux" 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 fonds bleus mais que vous ne voulez pas que les boutons changent? Il suffit de modifier votre fichier d'arrière-plans. Etc.
voici le meilleur moyen:
- créer un fichier css général avec tout le code partagé
- 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 aussi encoder vos images en base64 (mais vous pouvez aussi le faire avec vos fichiers js et css). De cette manière, vous réduisez encore plus le nombre de requêtes http à 1.
SASS et MOINS rendent tout cela vraiment un point discutable. Le développeur peut configurer des fichiers de composant efficaces et les compiler lors de la compilation. Dans SASS, vous pouvez désactiver le mode compressé en cours de développement pour faciliter la lecture et le réactiver pour la production.
http://sass-lang.comhttp://lesscss.org
En fin de compte, un fichier CSS minifié est ce que vous voulez, quelle que soit la technique utilisée. Moins de CSS, moins de requêtes HTTP, moins de demandes sur le serveur.
J'utilise Jammit pour gérer mes fichiers CSS et utiliser de nombreux fichiers pour plus de lisibilité. Jammit effectue tout le sale boulot de la combinaison et de la compression des fichiers avant leur déploiement en production. .__ De cette façon, j'ai beaucoup de fichiers en développement mais un seul en production.
L’avantage d’un fichier CSS unique est l’efficacité du transfert. Chaque demande HTTP signifie une réponse en-tête HTTP pour chaque fichier demandé, et cela prend de la bande passante.
Je sers mes 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 envoyer dans un seul fichier à la demande de l'utilisateur. Chaque navigateur moderne reçoit le fichier .php avec le code CSS et le traite en tant que fichier .css.
Vous pouvez simplement utiliser un fichier css pour améliorer les performances, puis commenter les sections comme ceci:
/******** Header ************/
//some css here
/******* End Header *********/
/******** Footer ************/
//some css here
/******* End Footer *********/
etc
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 dispositions de base, les marges, le remplissage, 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 blanc fl"/div --- Cela signifie que le conteneur est composé de 12 colonnes, utilise bg0 avec des marges de 10px et 5, le texte est blanc et 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 simples lorsque je code la page. Cela me permet de créer n'importe quelle combinaison de styles et ne limite pas ma créativité ni ne me permet de 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 en PSD mais dans le navigateur, ce qui permet également de gagner du temps. De plus, comme j'ai également créé un système de nommage pour mes arrière-plans et attributs de conception de page, je modifie simplement mon fichier image lors de la création d'un nouveau projet. Fond 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 fonctionner très bien
Une feuille de style fournie peut économiser les performances de chargement de la page, mais plus il y a de styles, plus le navigateur restitue lentement les animations sur la page où vous vous trouvez. Cela est dû à la grande quantité de styles inutilisés qui peuvent ne pas figurer 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 de page
Inconvénients des feuilles de style Bundled: - comportement plus lent, ce qui peut provoquer un choppyness lors du défilement, de l'interactivité, de l'animation,
Conclusion: Pour résoudre ces deux problèmes, la solution idéale pour la production est de regrouper tous les fichiers css dans un seul fichier afin de sauvegarder les requêtes http, mais d'utiliser le javascript pour extraire de ce fichier sur et mettre à jour la tête avec elle.
Pour savoir quels composants partagés sont nécessaires par page et pour réduire la complexité, il serait agréable d’avoir déclaré tous les composants utilisés par cette page, par exemple:
<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">