Je travaille sur un site Web de conception réactive pour fournir du contenu pour toutes les tailles d'écran. J'ai des requêtes multimédias pour 5 "étapes" différentes, et le fichier CSS fait environ 30 Ko.
Serait-il préférable de diviser cela en fichiers séparés et de les rendre similaires à ceci:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
ou dois-je les conserver dans un seul fichier CSS?
Mise à jour: Je voulais juste ajouter que ma principale préoccupation était la vitesse d'ouverture / de rendu des pages de navigateur / appareil, pas la facilité de développement.
Réponses:
Je pense que cela dépend vraiment de ce que vous trouvez le plus facile à développer et de ce qui vous aide à garder une feuille de style bien rangée.
Le seul véritable inconvénient auquel je peux penser en fractionnant serait que si l'attribut d'un élément apparaît dans toutes vos feuilles de style, vous devez mettre à jour 5 fichiers distincts pour le changer (plutôt qu'il n'apparaît côte à côte au même endroit).
Selon la réponse sur ce post, les navigateurs téléchargeront toutes les feuilles de style indépendamment, donc la répartition sur la résolution n'est pas un économiseur de bande passante: /programming/16657159/when-using-media-queries-does-a -phone-charge-non-pertinentes-requêtes-et-images
la source
Cela dépend légèrement de ce que vous voulez réaliser: essayez-vous d'accélérer le chargement de votre page ou essayez-vous de faciliter le développement?
Si vous ciblez ce dernier, vous pouvez utiliser plusieurs feuilles, mais c'est une question de préférence. Je trouve qu'il est plus facile d'utiliser un gros fichier car cela vous donne un aperçu de tous les styles que vous avez déclarés.
Si vous voulez une page de chargement plus rapide que votre meilleur pari serait de minimiser le nombre de demandes, car les frais généraux d'une demande sont assez importants. De plus, vous pouvez conserver une version de développement pour vous-même et servir un CSS minimisé sur le Web (je trouve YUI une bonne méthode: http://www.refresh-sf.com/yui/ ).
De plus, j'essaierais d'optimiser le CSS lui-même. Vous pouvez essayer de fusionner des classes très similaires, par exemple:
Peut être converti en:
La seule chose est que vous devez changer légèrement le code HTML
<span class="bold-and-italic">foo bar</span>
en<span class="bold italic">foo bar</span>
Je peux vous suggérer de jeter un œil à Bootstrap ( http://getbootstrap.com ), ces gars-là ont fait un excellent travail en divisant les classes en plusieurs «sous-classes».
J'espère que ça aide.
la source
.important
Il est probablement préférable de n'avoir qu'un seul fichier CSS, mais de le réduire et de le compresser. En supposant que vos 30 Ko soient avant cela, vous obtiendrez probablement la taille du fichier à environ 5 Ko avec minification (suppression des espaces blancs) et gzipping.
Le fractionnement vous permettra probablement d'accélérer davantage, mais uniquement sous certaines conditions.
<link>
balises avec différents attributs de média, les navigateurs semblent charger toutes les<link>
feuilles de style ed indépendamment des requêtes média (merci à @cimmanon pour cette info, je ne savais pas que) .Aussi: n'optimisez pas prématurément. Ne le faites que si vous rencontrez des problèmes de performances.
la source
<link rel="stylesheet" />
balise pour tous vos fichiers spécifiques aux requêtes multimédias, vous ne pourrez pas empêcher le navigateur de les télécharger. Vous devez utiliser le reniflement du navigateur côté serveur ou utiliser JavaScript pour examiner les dimensions de la fenêtre et injecter les feuilles de style appropriées. Aucun de ces choix n'est bon.<link>
-tag aurait empêché le chargement de feuilles de style non correspondantes. Pourquoi les navigateurs font ça? C'est bien sûr la raison la plus importante pour ne pas diviser les feuilles de style.Vous devez diviser vos fichiers CSS en fonction des requêtes multimédias car les fichiers CSS bloquent le rendu.
Lorsque le navigateur construit votre DOM, il doit d'abord attendre et charger tous vos fichiers CSS. Vous réduirez le temps de chargement de votre page si certains de vos fichiers CSS ne sont chargés qu'en fonction de certaines requêtes multimédias.
Cela vaut également pour l'ajout d'async à une balise de script JavaScript; ex
<script src='myfile.js' async></script>
. : .Le DOM n'a pas à attendre le chargement de votre fichier JS. N'ajoutez async que si la construction de votre DOM n'a pas besoin de ce JavaScript à la charge.
la source
Je serais enclin à dire cela.
Pour la production, conservez-les toujours dans un seul fichier; la raison étant qu'il est plus efficace pour le navigateur, et cela devrait être votre principal intérêt (OMI) lors du passage du développement à la production.
Le développement est une autre marmite de poisson. J'ai tendance à diviser les requêtes multimédias afin qu'elles soient par n'importe quel élément, par exemple:
Comme généralement si je change un élément, je ne veux pas avoir à chercher partout pour le CSS (bien que vous puissiez utiliser quelque chose comme grep ...).
Mais , une chose que je dirais, c'est qu'il vaut la peine de considérer le site lui-même, le processus de développement et le logiciel. Si vous pensez vraiment qu'il vaudra la peine de les séparer dans des fichiers basés sur la taille de l'écran, essayez-le. Faites une copie du site (si possible), jouez avec la copie - si c'est plus facile, utilisez-la. Vous n'avez pas besoin de suivre un paradigme unique pour développer un site Web.
la source
Simple: utilisez 1 feuille de style et ajoutez-y simplement des commentaires pour faciliter la recherche et la modification des styles CSS, par exemple:
Si vous le souhaitez, vous pouvez utiliser plusieurs feuilles de style et les appeler pour chaque taille spécifique.
la source
Je préfère regarder Bootstrap . C'est 1 fichier CSS qui contient tout le CSS. Il fonctionne sur près de 99% des navigateurs et est extrêmement réactif.
Cliquez sur la démo en direct et effectuez un zoom avant (
Ctrl +
= zoom avant,Ctrl -
= zoom arrière,Ctrl 0
= normal) ou ouvrez-le sur votre mobile pour voir son rendu.la source