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

¿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?

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/

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.

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.

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.

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)

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.

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 .

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.

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.

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.

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 ...

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.

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.

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.

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.

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.

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">

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 .....