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 le gustaría una hoja de estilo más pequeña, por lo tanto, hacer una individual es una mejor práctica?¿Un archivo CSS o archivos CSS individuales para cada página?
Utilice un solo archivo, los archivos CSS se almacenan en caché y, por lo tanto, reducen la necesidad de descargar un archivo nuevo para cada página nueva visitada.
Para ayudar, normalmente abrocho mi CSS a través de un CSS cleaner para reducir su tamaño de archivo, adicionalmente puede GZip CSS using .htaccess también, haciéndolo más pequeño una vez más.
Finalmente, poner todo el CSS en un solo archivo facilitará en el futuro la realización de cambios en la presentación del sistema (todo el motivo por el que usamos CSS en primer lugar), también facilitará la depuración.
edición, mayo de 2017
Mucho ha cambiado en más de 7 años, y cualquiera que busque en esta respuesta debe considerar la investigación de métodos de entrega de activos más nuevos, sobre todo ahora usan de HTTP2 y preprocesadores son más comunes.
El objetivo principal de la hoja de estilo es permitirle modificar 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 estilos 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.
Si desea tener un estilo uniforme en todas las páginas de su sitio web, use una hoja de estilo para todos los estilos comunes. De lo contrario, puede que le resulte bastante difícil mantener muchas hojas de estilo. Los cambios deberían agregarse a cada una de las hojas de estilo múltiples.
Las hojas de estilo que se usan solo en una página pueden ir en hojas de estilo separadas. Esto podría ser más útil para grandes hojas de estilo 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 y de propósito general en su página de inicio, solo se descargará una vez y se almacenará en caché para usarla en el futuro.
Desde que estoy realmente un programador web real (cosas de programación web de Java, no como PHP) Tengo que darle una opinión que nunca he visto cualquier diseñador web real dar:
favor ¡prosiga y divida sus archivos CSS en múltiples particiones lógicas siempre que sea posible! Si tiene una tabla muy estilizada, recopile sus elementos de CSS en un archivo, también recopile los estilos básicos de la página real en otro archivo, agregue los menús de navegación de CSS a la tercera y así sucesivamente. Por supuesto, puede reutilizar CSS individuales donde sean relevantes, pero NO HAGA ¡simplemente meta todo en un gran archivo!
Estoy de acuerdo con usted, pero la reducción de solicitudes http es valiosa, por lo que aún desea concatenar todos esos archivos CSS antes de entregarlos al cliente – Jiaaro
Una sugerencia diferente, utilice varias hojas de estilo durante el desarrollo y tenga un mecanismo que combinará 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 ejecutar antes de la implementación de producción, pero sería ideal tanto para uso de desarrollo como de producción. Si el proceso está automatizado correctamente (lo cual no es muy difícil de lograr), esto no causará ningún tipo de error también.
"Para fines de carga, ¿no le gustaría una hoja de estilo más pequeña, por lo tanto, hacer las individuales es una mejor práctica?"
Esto puede tener un efecto inverso, ya que usar 1 hoja de estilos se puede almacenar en la memoria caché y luego volver a cargar con facilidad, mientras carga constantemente 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 el diseño, le sugiero que tenga 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 utilizarse si los cambios CSS son lo suficientemente grandes como para garantizar el uso de hojas de estilo separadas.
me encontré con este hilo de la búsqueda de la misma pregunta .. Mi pensamiento era estructura como esta ..
layout.css < --- para la estructura del sitio, enlaces, encabezados, etc que son comunes a través de la sitio. form.css < - Formulario de estilos genéricos reset.css < - todos los documentos se restablece si se utilizan
y actualmente utiliza pages.css para todos los estilos de página ..
o
homepage.css about.css gallery.css
para evitar tener que utilizar demasiados identificadores y clases únicas para lograr una hoja de estilo que contiene todos los estilos teh para su sitio también es una buena idea añadir una clase para el cuerpo de cada página i La indicación de qué página es, por ejemplo,
, le permitirá utilizar las mismas clases y los mismos identificadores en cada página. Por ejemplo, utilizando la técnica anterior, puede darle al área de contenido de la página un estilo diferente utilizando .productPage #contentArea, por lo que no tendrá que poner un nuevo id #productPage_contentArea en el html de la página. – wheresrhys¿Qué hay de los enormes archivos CSS y el uso de memoria en dispositivos móviles? ¿Sigue siendo lógico en el caso de los dispositivos móviles, cree? ¿La experiencia del usuario de desaceleración de CSS enorme en el móvil? ¿Qué piensas sobre los archivos JavaScript, también es mejor tener uno? –
La reducción de las solicitudes HTTP es lo más importante cuando se trata de mejorar el rendimiento en un sitio web. Un gran archivo CSS no tomará una cantidad excesiva de tiempo para que un navegador móvil lo analice/procese; tener que descargar un archivo más grande llevará, por supuesto, más tiempo; sin embargo (en términos generales), es mucho más importante tener un archivo grande, que muchos archivos más pequeños. Porque las solicitudes HTTP tardan en ponerse en marcha. Busque la anatomía de la solicitud HTTP, más la segmentación TCP. –