¿Un único archivo .css enorme frente a varios archivos .css específicos más pequeños? [cerrado]

Resuelto Nate asked hace 14 años • 18 respuestas

¿Hay alguna ventaja en tener un único archivo monster .css que contenga elementos de estilo que se utilizará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 cada archivo en mi archivo principal. ¿ <link />Tan malo?

Estoy pensando que esto es mejor

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

vs.

  1. sitio.css

¿Has visto algún problema al hacerlo de una forma u otra?

Nate avatar Feb 26 '10 00:02 Nate
Aceptado

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

Personalmente, no me encanta leer un solo archivo CSS ENORME y mantenerlo es muy difícil. Por otro lado, dividirlo genera 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 publicarlos (para reducir las solicitudes http).

2) Si sabes que vas a cambiar tu CSS de vez en cuando y necesitas mantenerlo legible, crearía archivos separados y usaría código (siempre que estés usando algún tipo de lenguaje de programación) para combinarlos en tiempo de compilación del tiempo de ejecución (la minificación/combinación del tiempo de ejecución es un recurso excesivo).

Con cualquiera de las opciones, recomendaría encarecidamente 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:
Decidí usar archivos separados en mi tiempo de diseño y un proceso de compilación para minimizar y combinar. De esta manera puedo tener CSS separado (administrable) 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 los compradores, les recomiendo encarecidamente que utilicen el paquete como parte de su proceso de creación. Ya sea que esté compilando desde su IDE o desde un script de compilación, el paquete se puede ejecutar en Windows a través del software incluido exeo se puede ejecutar en cualquier máquina que ya esté ejecutando node.js.

Chase Florell avatar Feb 25 '2010 17:02 Chase Florell

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 único archivo fuente CSS normal), manteniendo al mismo tiempo 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. Personalmente uso Sass (sintaxis SCSS) ahora, pero antes usaba MENOS. Ambos son geniales, con beneficios similares. Una vez que haya escrito CSS con un compilador, es poco probable que desee prescindir de uno.

http://lesscss.org

http://sass-lang.com

Si no quieres perder el tiempo con Ruby, este compilador LESS para Mac es fantástico:

http://incident57.com/less/

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

http://incident57.com/codekit/

WinLess es una GUI de Windows para compilar MENOS

http://winless.org/

Marc Edwards avatar Sep 20 '2012 10:09 Marc Edwards