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


19

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.


¿Grunt / webpack / cualesquiera complementos existen para tomar un solo archivo css y dividirlo en varios archivos separados por consulta de medios? Entonces podría decirse que puede obtener la facilidad de desarrollo que ofrece un archivo monolítico y también la optimización de la velocidad de archivos separados.
Kevin Wheeler

Respuestas:


16

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


En esa publicación que vinculó, ¿sabe a qué se refiere con "esto es una limitación del CSSOM"?
DisgruntledGoat

1
El Modelo de Objetos CSS - dev.w3.org/csswg/cssom - Creo que esto define cómo se debe manejar CSS, por lo que creo que la limitación a la que se refiere será no tener un modelo que maneje tales estilos con un mayor ahorro de ancho de banda camino.
Richard B

3
Si bien no es un protector de descargas, lo es de alguna manera. Un navegador priorizará los enlaces de consultas de medios coincidentes sobre los no coincidentes. Un archivo CSS coincidente bloqueará la representación de la página, mientras que una no coincidente obtiene una prioridad más baja para la descarga del navegador y no bloquea la representación de la página. Además, una vez que se divide, puede usar js para descargar condicionalmente si desea guardar y ancho de banda.
Dalore

4

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.


1
Las clases que llevan el nombre del estilo tienen mala forma. También podría poner un atributo de estilo si vas a eso. Es mejor nombrar las clases lógicas. Me gusta.important
dalore

4

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.


3
Vale la pena señalar que si está utilizando la <link rel="stylesheet" />etiqueta para todos sus archivos específicos de consulta de medios, no podrá evitar que el navegador los descargue. Tendría que usar el buscador de navegador en el lado del servidor o JavaScript para examinar las dimensiones de la ventana gráfica e inyectar las hojas de estilo apropiadas. Ninguno de estos son buenas opciones.
cimmanon

1
Estoy un poco sorprendido, pero tienes razón: pensé que agregar el atributo media a la <link>etiqueta habría evitado cargar hojas de estilo que no coinciden. ¿Por qué los navegadores hacen eso? Por supuesto, esta es la razón más importante para no dividir las hojas de estilo.
Jost

Lo hacen porque su pantalla puede cambiar, y si está en un móvil y lo gira de vertical a horizontal, de repente el ancho de su pantalla es diferente. O en el escritorio, puede cambiar el tamaño de la ventana de su navegador, o arrastrar su ventana a otra pantalla si tiene una configuración de monitor múltiple. Si el navegador no descargara todos los recursos CSS por adelantado, habría un retraso en volver a representar la página si se produce alguna de las acciones anteriores
MrCarrot

Es mejor separarlos. En la actualidad, la mayoría de los navegadores son spdy (su sitio es https y spdy como debería ser) y con spdy, las conexiones múltiples se multiplexan en la misma conexión, por lo que la cantidad de archivos no importa ahora. Además, los navegadores colocarán los archivos CSS de las consultas de medios no coincidentes con una prioridad más baja para descargar y, lo que es más importante, NO BLOQUEARÁN el procesamiento de la página.
Dalore

3

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.


He oído decir que si realmente no desea que sus scripts asíncronos retrasen potencialmente la representación, ejecútelos en el evento window.onload en lugar de usar asíncrono.
Kevin Wheeler

2

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.


1

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.


-1

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.


2
Ya ha escrito 30kb de CSS, ¿cómo podría ser beneficioso cambiar a bootstrap?
Steve Sanders

Dicho así, sí, estoy de acuerdo en que 30kb de css es una misión para rehacer. Simplemente lo copiaría y pegaría en diferentes hojas de estilo, todo dependiendo de cómo esté estructurado, podría duplicar y cambiar el nombre de los archivos CSS y eliminar todas las partes innecesarias.
Respecto a Ogies Myburgh
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.