Dois-je diviser un grand fichier de requêtes multimédia CSS en fichiers séparés pour chaque taille d'écran?

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.

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

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:

.bold-and-italic { font-weight: bold; text-style: italic; }

Peut être converti en:

.bold { font-weight: bold; }
.italic { text-style: italic; }

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.

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.

• Vous devez vous assurer qu'une seule feuille de style est chargée à la fois - sinon vous auriez besoin de deux requêtes HTTP ou plus, qui ont elles-mêmes une surcharge, ce qui annulerait au moins en partie le gain de la taille de fichier plus petite. Pour ce faire, il ne suffit pas de simplement diviser la feuille de style et d'insérer plusieurs <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) .
• Le nombre de règles CSS partagées entre les feuilles de style doit être petit - sinon chacune des feuilles de style multiples devrait contenir toutes les règles communes et aurait donc presque la taille de l'original.
• Vous utilisez un préprocesseur CSS (ou quelque chose de similaire), il est donc gérable d'avoir les mêmes morceaux de code dans 5 feuilles de style.

Aussi: n'optimisez pas prématurément. Ne le faites que si vous rencontrez des problèmes de performances.

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.

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:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

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.

Simple: utilisez 1 feuille de style et ajoutez-y simplement des commentaires pour faciliter la recherche et la modification des styles CSS, par exemple:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

Si vous le souhaitez, vous pouvez utiliser plusieurs feuilles de style et les appeler pour chaque taille spécifique.

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.