¿Debo seguir molestando guardando todas las CSS en un solo archivo?

Question

Érase una vez los desarrolladores web más avanzados (¿cuándo lo fue de nuevo?)) Que deberíamos evitar administrar múltiples archivos CSS y mantener el uno por proyecto. Ayudó a mejorar la velocidad de carga de la página y evitar errores tontos cuando se trata de superponer muchas reglas de CSS.

Mi pregunta es: ¿este enfoque sigue siendo válido?

El argumento sobre el rendimiento de la carga de la página no parece sostener tanto hoy en día con Internet de banda ancha impresionante y navegadores web inteligentes con capacidades de almacenamiento en caché aún más impresionantes. La creación de CSS en cascada puede ser propensa a errores, pero solo para desarrolladores inexpertos y tener una hoja de estilo CSS realmente no nos hace a prueba de balas.

Creo que preferiría tener un conjunto de hojas de estilo predeterminadas ordenadamente separadas por componentes, luego unirlas en una sola regla por CSS @import. Esto también me permitiría incluir una hoja de estilo de reinicio por defecto.

¿Alguien está conmigo?

Answer 1

No se trata de velocidad de ancho de banda sino de número de solicitudes http, esto tiene mucho sentido para una conexión móvil.

Sin embargo, el enfoque de tener diferentes archivos css para mantener el proyecto modular es sólido, ya que le ayuda a mantener su CSS organizado de la manera que lo desee sin tener todo el código en un solo archivo. Entonces puede beneficiarse de los preprocesadores/minificadores de CSS para concatenar y comprimir todos sus archivos CSS en uno solo para la producción.

este artículo http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

tiene un párrafo acerca móvil que explica también por qué esto es una buena práctica:

que es mucho mejor descargar todo el contenido CSS de una sola vez sobre la inicial, conexión calentada. Al hacerlo, también ayudará al usuario a prolongar la duración de la batería. Si hay una optimización que hacer aquí, entonces es simplemente: concatenar y comprimir.

Answer 2

Estoy de acuerdo con usted, no encuentro ninguna razón para guardar solo una sola hoja de CSS, hoy en día, hago exactamente lo que acaba de indicar, separación por componente, junto con la carga lenta :) (php if statements etc).

Answer 3

Sí, ese enfoque sigue siendo válido. Hay docenas de artículos sobre la optimización de carga que hay docenas, pero la idea general es la siguiente

archivos Menos = menos peticiones HTTP realizadas al servidor = mejor rendimiento de carga

lo principal que ha cambiado con el tiempo es que ahora hay muchas herramientas que admiten fusionar varios archivos en uno solo en tiempo de ejecución. Por lo tanto, tiene hojas de estilos separadas para una mejor organización, depuración en tiempo de desarrollo, y esas herramientas combinan, minimizan y configuran los encabezados de almacenamiento en caché correctos durante la producción.