¿Un enorme archivo .css versus múltiples archivos .css específicos más pequeños? [cerrado]

258

¿Hay alguna ventaja de tener un solo archivo monstruoso .css que contenga elementos de estilo que se usarán en casi todas las páginas?

Estoy pensando que para facilitar la administración, me gustaría extraer diferentes tipos de CSS en unos pocos archivos, e incluir todos los archivos en mi main ¿ <link />es tan malo?

Estoy pensando que esto es mejor

  1. posiciones.css
  2. botones.css
  3. tablas.css
  4. copy.css

vs.

  1. site.css

¿Has visto alguna trampa al hacerlo de una manera frente a la otra?

Nate
fuente
1
Esta es una pregunta REALMENTE antigua, pero al enfrentar el mismo problema, encontré la que creo que es la mejor solución , en caso de que alguien más llegue a esta página. Múltiples archivos que se comprimen con PHP y se envían a través de una sola solicitud.
Francisco Presencia
3
@FrankPresenciaFandos hacer esto está bien para un sitio de bajo tráfico, pero ejecutar este script una y otra vez en sitios de alto tráfico parece un poco fuera de lugar. Si usa un script de compilación, puede tener lo mejor de ambos mundos y aún así mantener un servidor web de alto rendimiento ya que no está ejecutando el script php (nunca).
Chase Florell
2
Se ejecutará solo cada vez que se cambie el CSS, y luego deberá incluir el archivo CSS resultante.
Francisco Presencia

Respuestas:

85

Un compilador CSS como Sass o LESS es una excelente manera de hacerlo. De esa manera, podrá entregar un único archivo CSS minimizado para el sitio (que será mucho más pequeño y más rápido que un archivo fuente CSS normal), mientras mantiene el mejor entorno de desarrollo, con todo perfectamente dividido en componentes.

Sass y LESS tienen la ventaja adicional de variables, anidamiento y otras formas de hacer que CSS sea más fácil de escribir y mantener. Muy, muy recomendable. Yo personalmente uso Sass (sintaxis SCSS) ahora, pero usé MENOS anteriormente. Ambos son geniales, con beneficios similares. Una vez que haya escrito CSS con un compilador, es poco probable que quiera hacerlo sin uno.

http://lesscss.org

http://sass-lang.com

Si no quieres perder el tiempo con Ruby, este compilador MENOS para Mac es genial:

http://incident57.com/less/

O podrías usar CodeKit (por los mismos chicos):

http://incident57.com/codekit/

WinLess es una GUI de Windows para compilar MENOS

http://winless.org/

Marc Edwards
fuente
2
Cambiar mi respuesta aceptada aquí, ya que este es realmente el camino a seguir en estos días. Cuando pregunté originalmente, no siento que Sass o LESS realmente hayan despegado todavía.
Nate
144

Esta es una pregunta difícil de responder. Ambas opciones tienen sus pros y sus contras en mi opinión.

Personalmente, no me encanta leer un solo archivo CSS ENORME, y mantenerlo es muy difícil. Por otro lado, dividirlo provoca solicitudes http adicionales que podrían ralentizar las cosas.

Mi opinión sería una de dos cosas.

1) Si sabe que su CSS NUNCA cambiará una vez que lo haya creado, crearía varios archivos CSS en la etapa de desarrollo (para facilitar la lectura), y luego los combinaría manualmente antes de ponerlo en funcionamiento (para reducir las solicitudes http)

2) Si sabe que va a cambiar su CSS de vez en cuando y necesita mantenerlo legible, crearía archivos separados y usaría código (siempre que esté usando algún tipo de lenguaje de programación) para combinarlos en tiempo de ejecución de tiempo de ejecución (la combinación / minificación de tiempo de ejecución es un recurso porcino).

Con cualquiera de las opciones, recomendaría el almacenamiento en caché en el lado del cliente para reducir aún más las solicitudes http.

EDITAR:
Encontré este blog que muestra cómo combinar CSS en tiempo de ejecución usando nada más que código. Vale la pena echarle un vistazo (aunque todavía no lo he probado).

EDITAR 2:
me decidí por usar archivos separados en mi tiempo de diseño, y un proceso de construcción para minificar y combinar. De esta manera, puedo tener un CSS separado (manejable) mientras desarrollo y un archivo minificado monolítico adecuado en tiempo de ejecución. Y todavía tengo mis archivos estáticos y menos sobrecarga del sistema porque no estoy haciendo compresión / minificación en tiempo de ejecución.

nota: para sus compradores, les recomiendo utilizar el paquete como parte de su proceso de compilación. Ya sea que esté compilando desde su IDE, o desde un script de compilación, el paquete puede ejecutarse en Windows a través de lo incluido exeo puede ejecutarse en cualquier máquina que ya esté ejecutando node.js.

Chase Florell
fuente
Además de menos solicitudes HTTP, ¿hay alguna ventaja en el archivo monolítico único? Mi CSS puede cambiar con el tiempo, pero la cantidad de usuarios será bastante pequeña, la mayoría de los cuales tendrá acceso a través de conexiones de alta velocidad. Así que creo que la ventaja de múltiples archivos será mucho mayor que menos solicitudes http ...
Nate
1
Menos solicitudes HTTP ES la razón. retener a los visitantes es la prioridad n. ° 1, por lo que si su página se carga lentamente, es menos probable que se queden. Si tiene la capacidad de combinar (veo que está usando asp.net), le recomiendo hacerlo. Es lo mejor de ambos mundos.
Chase Florell
3
"Así que creo que la ventaja de múltiples archivos será mucho mayor que menos solicitudes http ..." No, no, no ... exactamente lo contrario. Con una conexión de alta velocidad, el tiempo necesario para gestionar las solicitudes HTTP es el cuello de botella. La mayoría de los navegadores de manera predeterminada solo descargan dos archivos a la vez, por lo que los navegadores hacen 2 solicitudes, esperan, descargan los archivos css rápidamente, envían 2 solicitudes más, esperan y descargan los archivos rápidamente. A diferencia de una solicitud HTTP para un archivo CSS, se descarga rápidamente. La comunicación con el servidor sería la parte lenta.
Isley Aardvark
1
Puede compilar y probar características con hojas de estilo separadas y combinarlas en un mongo uno por tiempo de construcción. De esa manera no mantendrás un archivo mongo sino muchos archivos más pequeños. Hacemos esto y comprimimos todo el espacio en blanco y los comentarios que facilitan la lectura de los humanos, pero no tienen sentido para sus páginas web.
No hay reembolsos No hay devoluciones
2
Sería tener esta respuesta actualizada ahora que http2 reduce la ventaja de menos solicitudes.
DD.
33

Prefiero múltiples archivos CSS durante el desarrollo. La gestión y la depuración son mucho más fáciles de esa manera. Sin embargo, sugiero que en el momento de la implementación, en su lugar, use una herramienta de minimización de CSS como YUI Compressor que fusionará sus archivos CSS en un archivo monolítico.

Randy Simon
fuente
@Randy Simon, pero ¿y si siempre editamos css directamente en ftp?
Jitendra Vyas
15
No conozco tu configuración, pero eso no me parece una buena idea. Debería probar los cambios antes de expulsarlos.
Randy Simon,
1
@RandySimon, el enlace del compresor YUI está roto.
reformado el
16

Quieres los dos mundos.

Desea múltiples archivos CSS porque su cordura es algo terrible que perder.

Al mismo tiempo, es mejor tener un solo archivo grande.

La solución es tener algún mecanismo que combine los múltiples archivos en un solo archivo.

Un ejemplo es algo como

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

Luego, el script allcss.php maneja la concatenación de los archivos y su entrega.

Idealmente, el script verificaría las fechas de modificación en todos los archivos, crea un nuevo compuesto si alguno de ellos cambia, luego devuelve ese compuesto y luego compara con los encabezados HTTP If-Modified para no enviar CSS redundante.

Esto te da lo mejor de ambos mundos. Funciona muy bien para JS también.

Will Hartung
fuente
77
sin embargo, la compresión / minificación en tiempo de ejecución tiene una sobrecarga del sistema. Tienes que sopesar los pros y los contras. Si tiene un sitio de alto tráfico, esta no es una solución óptima.
Chase Florell
55
@ChaseFlorell: solo hace la compresión / minificación una vez y la almacena en caché
Siler
@Siler, lo sé, por eso publiqué mi respuesta. stackoverflow.com/a/2336332/124069
Chase Florell
14

Tener solo un archivo CSS es mejor para el tiempo de carga de sus páginas, ya que significa menos solicitudes HTTP.

Tener varios pequeños archivos CSS significa que el desarrollo es más fácil (al menos eso creo: tener un archivo CSS por módulo de su aplicación facilita las cosas) .

Entonces, hay buenas razones en ambos casos ...


Una solución que le permitiría obtener lo mejor de ambas ideas sería:

  • Para desarrollar usando varios archivos CSS pequeños
    • es decir, más fácil de desarrollar
  • Para tener un proceso de compilación para su aplicación, que "combina" esos archivos en uno
    • Ese proceso de construcción también podría minimizar ese gran archivo, por cierto
    • Obviamente significa que su aplicación debe tener algunas cosas de configuración que le permitan pasar del "modo de archivos múltiples" al "modo de archivos mono".
  • Y para usar, en producción, solo el archivo grande
    • es decir, páginas de carga más rápidas

También hay algún software que hace esa combinación de archivos CSS en tiempo de ejecución, y no en tiempo de compilación; pero hacerlo en tiempo de ejecución significa comer un poco más de CPU (y obviamente requiere algún mecanismo de almacenamiento en caché, para no volver a generar el archivo grande con demasiada frecuencia)

Pascal MARTIN
fuente
14

Históricamente, una de las principales ventajas x de tener un solo archivo CSS es el beneficio de velocidad cuando se usa HTTP1.1.

Sin embargo, a partir de marzo de 2018, más del 80% de los navegadores ahora son compatibles con HTTP2, lo que permite que el navegador descargue múltiples recursos simultáneamente y que pueda impulsar los recursos de forma preventiva. Tener un solo archivo CSS para todas las páginas significa un tamaño de archivo mayor que el necesario. Con un diseño adecuado, no veo ninguna ventaja en hacer esto más que es más fácil de codificar.

El diseño ideal para HTTP2 para un mejor rendimiento sería:

  • Tenga un archivo CSS central que contenga estilos comunes utilizados en todas las páginas.
  • Tener CSS específico de página en un archivo separado
  • Use HTTP2 push CSS para minimizar el tiempo de espera (se puede usar una cookie para evitar empujes repetidos)
  • Opcionalmente, separe el CSS de plegado y presione esto primero y luego cargue el CSS restante (útil para dispositivos móviles de bajo ancho de banda)
  • También puede cargar el CSS restante para el sitio o páginas específicas después de que la página se haya cargado si desea acelerar futuras cargas de página.
DD.
fuente
1
Esta debería ser la respuesta moderna aceptada RE performance. Algunas otras respuestas están desactualizadas.
SparrwHawk
Si está creando un SPA (aplicación de una sola página), entonces diría que el mejor diseño es construir todos sus css y js en dos archivos completos. "app.js" y "vendor.js" Todos los html y los estilos se compilan en JS en línea en vendor.js Eso significa que "bootstrap.css y bootstrap.js" están todos en vendor.js y está minimizado con mapas de origen en " vendor.min.js ". Lo mismo con la aplicación, excepto que ahora usa un html para el transpilador en línea js, por lo que incluso sus aplicaciones html están en el archivo js. Puede alojarlos en un CDN y los navegadores los almacenarán en caché. Incluso puede compilar imágenes a estilos y en JS.
Ryan Mann el
12

Las hojas de estilo monolíticas ofrecen muchos beneficios (que se describen en las otras respuestas), sin embargo, dependiendo del tamaño general del documento de hoja de estilo, podría tener problemas en IE. IE tiene una limitación con cuántos selectores leerá de un solo archivo . El límite es de 4096 selectores. Si su hoja de estilo monolítica tendrá más que esto, querrá dividirla. Esta limitación solo muestra su fea cabeza en IE.

Esto es para todas las versiones de IE.

Vea el blog Ross Bruniges y la página de AddRule de MSDN .

TheClair
fuente
7

Hay un punto de inflexión en el que es beneficioso tener más de un archivo CSS.

Un sitio con más de 1 millón de páginas, que es probable que el usuario promedio solo vea, por ejemplo, 5, podría tener una hoja de estilo de proporciones inmensas, por lo que tratar de ahorrar la sobrecarga de una sola solicitud adicional por carga de página teniendo una descarga inicial masiva es falso economía.

Extienda el argumento hasta el límite extremo: es como sugerir que se debe mantener una hoja de estilo grande para toda la web. Claramente sin sentido.

Sin embargo, el punto de inflexión será diferente para cada sitio, por lo que no hay una regla dura y rápida. Dependerá de la cantidad de CSS únicos por página, el número de páginas y el número de páginas que el usuario promedio puede encontrar de forma rutinaria mientras usa el sitio.

Claud
fuente
Si. Esta es la pregunta por la que vine aquí. Todos se centran en el desarrollo frente a la producción. Por supuesto, su entorno de desarrollo puede ser diferente de su sitio en vivo, pero ¿cuál es mejor para el sitio en vivo? Nadie parece realmente abordar esto. ¿Conoces algún recurso para encontrar dónde está el punto de inflexión?
Dominic P
5

Normalmente tengo un puñado de archivos CSS:

  • un archivo css "global" para restablecimientos y estilos globales
  • archivos css específicos de "módulo" para páginas que están agrupadas lógicamente (tal vez cada página en un asistente de pago o algo así)
  • archivos css específicos de "página" para anulaciones en la página (o, coloque esto en un bloque en la página individual)

Realmente no me preocupan las solicitudes de páginas múltiples para archivos CSS. La mayoría de las personas tienen un ancho de banda decente y estoy seguro de que hay otras optimizaciones que tendrían un impacto mucho mayor que combinar todos los estilos en un archivo CSS monolítico. La compensación es entre velocidad y mantenibilidad, y siempre me inclino por la mantenibilidad. Sin embargo, el competidor de YUI suena bastante bien, podría tener que comprobar eso.

Nicholas Cloud
fuente
Esto es lo que hago, y me ha funcionado bien. Como máximo, obtienes 3 archivos css para cada página, lo cual es bastante razonable
Ricardo Nunes
4

Prefiero múltiples archivos CSS. De esa manera, es más fácil intercambiar "máscaras" dentro y fuera como lo desee. El problema con un archivo monolítico es que puede salirse de control y ser difícil de administrar. ¿Qué pasa si quieres fondos azules pero no quieres que cambien los botones? Simplemente modifique su archivo de fondos. Etc.

Robusto
fuente
El problema es que esto es bastante egoísta desde el punto de vista de los desarrolladores. Una vez que haya terminado, rara vez tendrá que volver a entrar, pero todos sus visitantes tendrán que esperar a que las páginas carguen archivos CSS innecesarios. (Lo mismo ocurre con Javascript en mi opinión)
Chase Florell
3
@rockin: Al revisar uno de mis sitios de 5 archivos CSS después de borrar mi caché, descubrí que el tiempo total que tardó en cargar todo CSS fue menos de una décima de segundo. Si las personas no pueden esperar tanto, creo que necesitan más Ritalin o algo así. Lo que es un problema mucho mayor son las devoluciones de llamada a sitios de publicidad como doble clic, etc., que pueden dar lugar a ENORMES demoras, como se observó en este mismo sitio durante la semana pasada.
Robusto
Una gran herramienta para probar las velocidades del sitio es Firebug junto con YSlow. Esto debería darle una representación precisa de las velocidades de su sitio.
Chase Florell
4

Tal vez eche un vistazo a la brújula , que es un marco de creación de CSS de código abierto. Se basa en Sass, por lo que admite cosas interesantes como variables, anidamiento, mixins e importaciones. Especialmente las importaciones son útiles si desea mantener separados los archivos CSS más pequeños pero combinarlos en 1 automáticamente (evitando múltiples llamadas HTTP lentas). Compass agrega a esto un gran conjunto de mixins predefinidos que son fáciles de manejar. Está escrito en Ruby, pero se puede usar fácilmente con cualquier sistema ...

stikkos
fuente
3

Aquí está la mejor manera:

  1. crear un archivo css general con todo el código compartido
  2. inserte todo el código CSS de la página específica en la misma página, en la etiqueta o utilizando el atributo style = "" para cada página

de esta manera solo tiene un css con todo el código compartido y una página html. por cierto (y sé que este no es el tema correcto) también puede codificar sus imágenes en base64 (pero también puede hacerlo con sus archivos js y css). de esta manera, reduce aún más solicitudes http a 1.

Ismael Miguel
fuente
2

SASS y MENOS hacen que todo esto sea realmente un punto discutible. El desarrollador puede configurar archivos de componentes efectivos y en la compilación combinarlos todos. En SASS puede desactivar el modo comprimido mientras está en desarrollo para facilitar la lectura y volver a activarlo para la producción.

http://sass-lang.com http://lesscss.org

Al final, un solo archivo CSS minificado es lo que desea, independientemente de la técnica que utilice. Menos CSS, menos solicitudes HTTP, menos demanda en el servidor.

augurona
fuente
1

La ventaja de un solo archivo CSS es la eficiencia de transferencia. Cada solicitud HTTP significa una respuesta de encabezado HTTP para cada archivo solicitado, y eso requiere ancho de banda.

Sirvo mi CSS como un archivo PHP con el tipo mime "text / css" en el encabezado HTTP. De esta manera, puedo tener múltiples archivos CSS en el lado del servidor y usar PHP incluye para insertarlos en un solo archivo cuando el usuario lo solicite. Cada navegador moderno recibe el archivo .php con el código CSS y lo procesa como un archivo .css.


fuente
Entonces, si estoy usando ASP.NET, un controlador genérico .ASHX sería la ruta ideal, ¿los combina en un solo archivo para obtener lo mejor de ambos mundos?
Nate
Sí, usaría un IHttpHandler para combinar tu CSS en tiempo de ejecución (ver # 2 en mi respuesta anterior)
Chase Florell
@Nate: Cuando trabajaba en ASP.Net, utilizamos archivos de plantilla para lograr lo mismo.
Robusto
@Robusto, ¿podría explicar qué es un archivo de plantilla? No creo haber oído hablar de eso. He usado App_Themes, pero eso todavía no combina CSS.
Chase Florell
1
Solo como una actualización. Usar un IHttpHandler o un archivo PHP para combinar CSS en el lado del servidor puede ahorrar ancho de banda y acelerar las solicitudes, pero también agrega una carga innecesaria en el servidor. La mejor manera de hacerlo es combinar / minimizar sus css / js durante la compilación / publicación de su sitio. De esta manera, tiene un único archivo estático que no requiere ningún procesamiento del servidor. Lo mejor de TODOS los mundos, bar NINGUNO.
Chase Florell
1

Puede usar un solo archivo CSS para el rendimiento y luego comentar secciones como esta:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

etc.

Bagre
fuente
44
Eso no significa que sea más fácil de mantener, ya que todavía tenga que desplazarse a través de millas de CSS sin relación para llegar a lo que busco ...
Nate
2
@Nate: ¿Has considerado cambiar a un editor de texto con una funcionalidad de búsqueda decente? Mi preferencia personal es un solo archivo CSS y nunca me desplazo por él. Solo escribo "/ classname" (uso una derivada vi) y bam , estoy en esa clase.
Dave Sherohman
3
También es más difícil de mantener en un entorno de múltiples desarrolladores. ¿Qué es un "encabezado" en su ejemplo anterior? ¿Qué sucede si alguien más no está pensando geográficamente, sino en términos de elementos de diseño básicos, como botones o menús, mientras que otros piensan de manera diferente? ¿A dónde va un menú si está en un encabezado? ¿Qué tal si no es así? Creo que es más fácil imponer ese tipo de disciplina en archivos separados. ¿Por qué los desarrolladores de aplicaciones simplemente no crean una gran clase de aplicación con todos los recortes en lugar de un marco con jerarquía de clases? Parece similar a mi
Robusto
¿Qué sucede si no recuerda el nombre de la clase que está buscando? ¿O cómo decides dónde agregar una nueva clase?
Nate
Si es solo un sitio web de dos páginas, realmente no es tan importante. Solo sugiero otra forma de hacer las cosas.
Bagre
1

Estoy usando Jammit para manejar mis archivos css y uso muchos archivos diferentes para facilitar la lectura. Jammit hace todo el trabajo sucio de combinar y comprimir los archivos antes de la implementación en producción. De esta manera, tengo muchos archivos en desarrollo pero solo uno en producción.

jlfenaux
fuente
0

Una hoja de estilo incluida puede ahorrar rendimiento de carga de la página, pero cuantos más estilos haya, más lento será el navegador para generar animaciones en la página en la que se encuentra. Esto se debe a la gran cantidad de estilos no utilizados que pueden no estar en la página en la que se encuentra, pero el navegador aún tiene que calcular.

Ver: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Ventajas de las hojas de estilo incluidas: - rendimiento de carga de página

Desventajas de las hojas de estilo incluidas: - comportamiento más lento, que puede causar agitación durante el desplazamiento, la interactividad, la animación,

Conclusión: Para resolver ambos problemas, para la producción, la solución ideal es agrupar todo el CSS en un archivo para guardar en las solicitudes HTTP, pero usar JavaScript para extraer de ese archivo, el CSS de la página en la que se encuentra y actualizar el encabezado con él. .

Para saber qué componentes compartidos se necesitan por página y para reducir la complejidad, sería bueno haber declarado todos los componentes que utiliza esta página en particular, por ejemplo:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">
Steve Tomlin
fuente
-1

He creado un enfoque sistemático para el desarrollo de CSS. De esta manera puedo utilizar un estándar que nunca cambia. Primero comencé con el sistema de cuadrícula 960. Luego creé líneas individuales de CSS para diseños básicos, márgenes, relleno, fuentes y tamaños. Luego los ensarto según sea necesario. Esto me permite mantener un diseño consistente en todos mis proyectos y utilizar los mismos archivos CSS una y otra vez. Porque no son específicos. Aquí hay un ejemplo: ---- div class = "c12 bg0 m10 p5 white fl" / div --- Esto significa que el contenedor tiene 12 columnas de ancho, utiliza bg0 tiene márgenes de 10px de 5, el texto es blanco y flota izquierda. Podría cambiar esto fácilmente eliminando o agregando un nuevo, lo que yo llamo un estilo "ligero", en lugar de crear una sola clase con todos estos atributos; Simplemente combino los estilos individuales mientras codifico la página. Esto me permite crear cualquier combinación de estilos y no limita mi creatividad ni me hace crear una gran cantidad de estilos similares. Sus hojas de estilo se vuelven mucho más manejables, minimizadas y le permiten reutilizarlas una y otra vez. Este método me ha parecido fantástico para un diseño rápido. También ya no diseño primero en PSD sino en el navegador, lo que también ahorra tiempo. Además, porque también he creado un sistema de nombres para mis fondos y atributos de diseño de página, simplemente cambio mi archivo de imagen al crear un nuevo proyecto. (Bg0 = fondo del cuerpo de acuerdo con mi sistema de nombres) Eso significa que si anteriormente tenía un blanco fondo con un proyecto simplemente cambiándolo a negro simplemente significa que en el próximo proyecto bg0 será un fondo negro u otra imagen .....

raquel
fuente
12
¿Sabes para qué son los párrafos?
Em1
Este es el "Marco UI" como Bootstrap u otros, una vez que conoces el léxico que estás listo, se trata de la curva de aprendizaje y la aceptación de los términos utilizados. Sin embargo, puedo pensar en algunos casos muy específicos en los que su ejemplo tendrá dificultades para cumplir con los requisitos de los diseñadores.
augurone