Feuilles de style uniques ou multiples en responsive web design

Question

En bref :

Faut-il utiliser une ou plusieurs feuilles de style en responsive web design ?

En détail :

En conception réactive Dans le cas d'une page d'accueil, vous avez tendance à avoir un morceau principal de CSS, puis d'autres morceaux pour ajuster la mise en page lorsqu'elle atteint certains points d'arrêt. Vous pouvez structurer votre code de deux manières :

Feuille de style unique

/* Main CSS */

@media only screen and (min-width: 480px) { /* CSS */ }
@media only screen and (min-width: 640px) { /* CSS */ }
@media only screen and (min-width: 800px) { /* CSS */ }

Feuilles de style multiples

<link rel="stylesheet" media="screen" href="main.css">
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 640px)" href="640.css">
<link rel="stylesheet" media="only screen and (min-width: 800px)" href="800.css">

Il semble que l'utilisation d'une feuille de style réduise le nombre de requêtes HTTP, mais vous aurez un fichier plus volumineux qui contiendra du code qui pourrait ne pas être utilisé par certains clients. L'utilisation de plusieurs feuilles de style semble réduire la taille des fichiers, mais les requêtes HTTP sont plus nombreuses.

Quand opter pour l'une ou l'autre approche ? Quels sont les avantages et les inconvénients du nombre de requêtes HTTP et de la taille des fichiers dans la pratique ?

Answer 1

Les feuilles de style sont toujours téléchargés, quel que soit le média utilisé, qu'il s'agisse de screen , print o 3D-glasses .

Voir : Pourquoi tous les navigateurs téléchargent-ils tous les fichiers CSS, même pour les types de médias qu'ils ne prennent pas en charge ?

Dans cette optique, le fait de les regrouper dans une seule feuille de style réduira le nombre de requêtes http, alors que des feuilles de style séparées créeront toujours plus de requêtes sans aucun avantage.