¿Un archivo CSS o archivos CSS individuales para cada página?

Question

Cuando estoy creando páginas, ¿quiero tener hojas de estilo individuales para cada página o una hoja de estilo grande para todo el sitio? Para fines de carga, ¿no serían una mejor práctica los archivos individuales porque sería menos CSS total en la carga?

Answer 1

Use un solo archivo, los archivos CSS se almacenan en caché y, por lo tanto, reducen la necesidad de descargar un nuevo archivo para cada nueva página visitada.

Para ayudar, generalmente abrocho mi CSS a través de un CSS Cleaner para reducir el tamaño de su archivo, además puede GZip CSS usando .htaccess también, haciéndolo más pequeño una vez más.

Finalmente, poner todo el CSS en un solo archivo hará que los cambios de presentación del sistema sean más fáciles en el futuro (la razón por la que usamos CSS en primer lugar), también facilitará la depuración.

Editar, mayo de 2017

Mucho ha cambiado en más de 7 años, y cualquiera que vea esta respuesta debería considerar investigar métodos de entrega de activos más nuevos, especialmente ahora, el uso de HTTP2 y los preprocesadores son más comunes.

Answer 2

Una sugerencia diferente: use varias hojas de estilo durante el desarrollo y tenga un mecanismo que fusionará todas las hojas de estilo en un solo archivo CSS para la implementación de producción. Esto puede requerir un poco de codificación adicional y algunos scripts adicionales para ejecutarse antes de la implementación de producción, pero sería ideal tanto para uso de desarrollo como para uso de producción. Si el proceso está correctamente automatizado (lo cual no es muy difícil de lograr), esto tampoco causará ningún tipo de error.

Answer 3

El propósito principal de la hoja de estilo es permitirle alterar el diseño en todas sus páginas. Si tiene h1 {color:red;} en cada página y luego desea cambiarlo a azul, deberá editar la hoja de estilo de cada página. Con una hoja de estilo, podrá cambiar el color y reflejarlo en todo el sitio.

Además, la hoja de estilo se almacenará en caché en la computadora del usuario en lugar de descargarse de cada página.

Answer 4

Si desea tener un estilo consistente en todas las páginas de su sitio web, use una hoja de estilo para todos los estilos comunes. De lo contrario, puede resultarle bastante difícil mantener muchas hojas de estilo. Los cambios tendrían que agregarse a cada una de las múltiples hojas de estilo.

Las hojas de estilo que se usan solo en una sola página podrían ir en hojas de estilo separadas. Esto podría ser más útil para hojas de estilo grandes de una sola página y / o hojas de estilo para páginas web a las que se accede con poca frecuencia.

Sus hojas de estilo no se volverán a cargar en cada actualización de página. Si hace referencia a la hoja de estilo grande de uso general en su página de inicio, solo se descargará una vez y se almacenará en caché para su uso futuro.

Answer 5

" Para propósitos de carga, ¿no le gustaría una hoja de estilo más pequeña, por lo tanto, hacer una individual es una mejor práctica? "

Esto puede tener un efecto inverso, ya que al usar 1 hoja de estilo se puede almacenar en caché y luego volver a cargar con facilidad, mientras que constantemente está cargando un nuevo archivo CSS para cada página con su método.

La mayoría de los sitios no necesitan tener más de una hoja de estilo para un tipo de medio. Sin embargo, si su sitio varía drásticamente en diseño, sugeriría tener una hoja de estilo base que tenga todas las propiedades comunes, y luego una hoja de estilo secundaria para cada una de las páginas que contenga las diferencias.

Esto solo debe usarse si los cambios de CSS son lo suficientemente grandes como para garantizar el uso de hojas de estilo separadas.

Answer 6

Dado que en realidad soy un programador web real (material de programación web de Java, no secuencias de comandos como PHP), tengo que opinar que nunca he visto ningún diseñador web real:

¡Siga adelante y divida sus archivos CSS en múltiples particiones lógicas siempre que sea posible! Si tiene una tabla enormemente estilizada, recopile sus elementos CSS en un archivo, también recopile los estilos básicos de la página real en otro archivo, agregue esos CSS de navegación del menú: s al tercero y así sucesivamente. Por supuesto, puede reutilizar CSS individuales: s donde son relevantes, pero NO ¡simplemente agrupe todo en un archivo grande!

Answer 7

Encontré este hilo buscando la misma pregunta ... Mi pensamiento era estructurar así ...

Layout.css < --- para la estructura del sitio, enlaces, encabezados, etc. que son comunes en todo el sitio. form.css < - estilos de formulario genéricos reset.css < - todo el documento se restablece si los usa

y actualmente uso pages.css para todos los estilos de página ...

o

homepage.css about.css gallery.css