En breve

Debería usar una o varias hojas de estilo al hacer un diseño web receptivo?

En detalle

Indiseño de respuest, tiende a tener una porción principal de CSS, luego otros bits y piezas para ajustar el diseño cuando alcanza ciertos puntos de interrupción. Puede estructurar su código de dos maneras:

Hoja de estilo individual

/* 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 */ }

Múltiples hojas de estilo

<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">

Parece que el uso de una hoja de estilo reducirá la cantidad de solicitudes HTTP, pero tendrá un archivo más grande que contendrá código que algunos clientes podrían no usar. Múltiples hojas de estilo parecen mantener bajos los tamaños de archivo, pero luego tiene más solicitudes HTTP.

¿Cuándo debería optar por cada enfoque? ¿Cómo se comparan los pros y los contras de la cantidad de solicitudes HTTP y el tamaño del archivo en la práctica?