En resumen:individuales vs múltiples hojas de estilo en el diseño web receptivo
En caso de utilizar una o varias hojas de estilo cuando se hace el diseño web receptivo?
En detalle:
En responsive design, que tienden a tener un trozo principal de CSS, a continuación, otras partes y piezas para ajustar el diseño cuando se llega a ciertos puntos de interrupción. Se puede estructurar su código de una de dos maneras:
de hojas 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 se reducirá el número de peticiones HTTP, pero tendrá un archivo más grande que contendrá un código que algunos clientes podrían no usar. Varias hojas de estilo parecen mantener el tamaño de los archivos, pero luego tienes más solicitudes HTTP.
¿Cuándo debe optar por cada enfoque? ¿Cómo se acumulan en la práctica los pros y los contras del número de solicitudes HTTP y el tamaño del archivo?
¿Qué tarda más, procesar una solicitud HTTP (ida y vuelta) o procesar un archivo CSS más largo de lo necesario? –
El tamaño del archivo es relativamente pequeño en la mayoría de las hojas de estilo. Incluso un archivo CSS grande en 50K probablemente sea la menor de tus preocupaciones en la optimización del rendimiento. –