¿Debería dividir un archivo grande de consultas de medios CSS en archivos separados para cada tamaño de pantalla?

Estoy trabajando en un sitio web de diseño receptivo para entregar contenido para todos los tamaños de pantalla. Tengo consultas de medios para 5 "pasos" diferentes, y el archivo CSS tiene alrededor de 30 Kb.

¿Sería mejor dividir esto en archivos separados y hacerlos similares a esto:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

o debería guardarlos en un archivo CSS?

Actualización: solo quería agregar, que mi principal preocupación era la velocidad de apertura / representación de la página del navegador / dispositivo, no la facilidad de desarrollo.

Creo que realmente depende de lo que encuentre más fácil para el desarrollo y de lo que le ayuda a mantener una hoja de estilo ordenada.

El único inconveniente real que se me ocurre al dividir sería que si el atributo de un elemento apareciera en todas sus hojas de estilo, tendría que actualizar 5 archivos separados para cambiarlo (en lugar de aparecer uno al lado del otro en un solo lugar).

Según la respuesta en esta publicación, los navegadores descargarán todas las hojas de estilo independientemente, por lo que dividir la resolución no ahorra ancho de banda: /programming/16657159/when-using-media-queries-does-a -phone-load-non-relevent-queries-and-images

Depende un poco de lo que quieras lograr: ¿estás tratando de hacer que tu página se cargue más rápido o estás tratando de facilitar el desarrollo?

Si apuntas a este último, entonces podrías usar varias hojas, pero eso es todo una cuestión de preferencia. Creo que es más fácil usar un archivo grande, ya que esto le brinda una visión general de todos los estilos que ha declarado.

Si desea una página de carga más rápida que su mejor apuesta sería minimizar la cantidad de solicitudes, ya que una sobrecarga de la solicitud es bastante grande. Además, puede mantener una versión de desarrollo para usted y servir un CSS minimizado a la web (creo que YUI es un buen método: http://www.refresh-sf.com/yui/ ).

Además, trataría de optimizar el propio CSS. Podría intentar fusionar clases que son muy similares, por ejemplo:

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

Se puede convertir en:

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

Lo único es que tienes que cambiar el html ligeramente de <span class="bold-and-italic">foo bar</span>a<span class="bold italic">foo bar</span>

Puedo sugerirte que eches un vistazo a Bootstrap ( http://getbootstrap.com ), estos muchachos han hecho un gran trabajo al dividir las clases en múltiples 'subclases'.

Espero que esto ayude.

Probablemente sea mejor tener solo un archivo CSS, pero minificarlo y comprimirlo. Suponiendo que sus 30 KB son antes de hacerlo, probablemente reducirá el tamaño del archivo a aproximadamente 5 KB con minificación (eliminación de espacios en blanco) y gzipping.

Dividirse probablemente le dará más velocidad, pero solo bajo ciertas condiciones.

• Debería asegurarse de que solo se cargue una hoja de estilo cada vez; de lo contrario, necesitaría dos o más solicitudes HTTP, que tienen una sobrecarga, lo que negaría al menos en parte la ganancia del tamaño de archivo más pequeño. Para ello, es que no basta con sólo divide la hoja de estilos e insertar múltiples <link>-tags con diferentes atributos multimedia, navegadores parecen cargar todas las <link>hojas de estilo ed independientemente de las preguntas de los medios (gracias a @cimmanon por esta información, no sabía que) .
• El número de reglas CSS compartidas entre las hojas de estilo debe ser pequeño; de lo contrario, cada una de las múltiples hojas de estilo necesitaría contener todas las reglas comunes y, por lo tanto, tendría casi el tamaño del original.
• Utiliza un preprocesador CSS (o algo similar), por lo que es manejable tener las mismas piezas de código en 5 hojas de estilo.

Además: no optimice prematuramente. Solo hazlo si tienes problemas de rendimiento.

Debe dividir sus archivos CSS en función de las consultas de medios porque los archivos CSS están bloqueando el procesamiento.

Cuando el navegador está construyendo su DOM, primero tiene que esperar y cargar todos sus archivos CSS. Reducirá el tiempo de carga de la página si algunos de sus archivos CSS solo se cargan en función de determinadas consultas de medios.

Esto también sirve para agregar asíncrono a una etiqueta de script JavaScript; ej <script src='myfile.js' async></script>. : .

El DOM no tiene que esperar a que se cargue su archivo JS. Solo agregue asíncrono si la construcción de su DOM no necesita nada de ese JavaScript en la carga.

Me inclinaría a decir esto.

Para la producción, guárdelos siempre en un archivo; la razón es que es más eficiente para el navegador, y ese debería ser su principal interés (IMO) al pasar del desarrollo a la producción.

El desarrollo es un caldero diferente de peces. Tiendo a dividir las consultas de medios para que sean por cualquier elemento, por ejemplo:

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

Como generalmente si estoy cambiando un elemento, no quiero tener que buscar por todas partes el CSS (aunque puede usar algo como grep ...).

Pero , una cosa que diría es que vale la pena considerar el sitio en sí, el proceso de desarrollo y el futuro. Si realmente piensa que valdrá la pena separarlos en archivos basados ​​en el tamaño de la pantalla, inténtelo. Haga una copia del sitio (si es posible), juegue con la copia; si es más fácil, úsela. No necesita seguir un paradigma único para todos sobre cómo desarrollar un sitio web.

Simple: use 1 hoja de estilo y solo agregue comentarios para que sea más fácil encontrar y cambiar los estilos CSS, por ejemplo:

//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 lo desea, puede usar varias hojas de estilo y llamarlas para cada tamaño específico.

Prefiero mirar Bootstrap . Es 1 archivo CSS que contiene todo el CSS. Funciona en casi el 99% de los navegadores y es extremadamente sensible.

Haga clic en la demostración en vivo para acercar ( Ctrl += acercar, Ctrl -= alejar, Ctrl 0= normal) o ábralo en su dispositivo móvil para ver cómo se muestra.