Me pregunto si es mejor crear uno o varios archivos para archivos CSS.Para el rendimiento, use uno o varios archivos css?
Siempre veo sitios web con muchos archivos css, pero seems better para usar solo un archivo grande.
¿Cuál es su consejo?
En cuanto a rendimiento, es mejor con un solo archivo, ya que da como resultado una conexión y solicitud al servidor (estas tienden a ser operaciones costosas, según el tiempo).
Es por eso que existen marcos minifying, que fusionan todos los archivos CSS (y JavaScript) para cada página y los sirven en una sola solicitud.
Bueno, lo mismo que Yahoo! 'S: utilice uno para reducir el número de solicitudes HTTP.
Diferentes solicitudes HTTP no son el cuello de botella aquí, el tamaño del archivo es en última instancia. La razón por la que es mejor dividir las cosas tanto como sea posible es porque si desea cambiar una cierta sensación del sitio, digamos, la fuente de todos los encabezados, desea cambiar un archivo/configuración solo para eso, y desea ese archivo sea lo más pequeño posible.
Para CSS grande y abarcador, haría diferentes documentos CSS para todo tipo de cosas, como el diseño, el tratamiento de clases, etc., otra ventaja es que si tiene varias páginas que necesitan un aspecto ligeramente diferente de la página principal, solo tienen que vincular a otro archivo CSS, no a uno completamente diferente, la mayoría comparten.
Sí, una vez que todos los archivos css han sido cargados y almacenados en la memoria caché en el navegador, solo necesita cargar el pequeño que realmente ha cambiado en lugar de cargar todo. –
De hecho, una cosa que aún no había visto, tampoco tiene que volver a cargar mucho después de las actualizaciones o si algunas partes de su sitio usan un CSS ligeramente diferente. Aunque hago esto solo por organización, pero normalmente tengo mi CSS dividido entre frame.css (colocando) colours.css, fonts.css et cetera. – Zorf
No estoy de acuerdo con esto. La sobrecarga de las conexiones HTTP en la mayoría de los casos * vastamente * supera la cantidad de CSS que está descargando. Incluso un archivo cz de 30k vería hasta el 50% del tiempo total de descarga como una sobrecarga de solicitud, dividirlo solo aumentaría eso. – womp
Múltiples archivos son buenos para la organización, pero una solicitud al servidor es definitivamente la mejor. Si miras los videos de rendimiento de Google, sugieren la menor cantidad posible de solicitudes HTTP. Cada solicitud HTTP tiene una sobrecarga en el intercambio de información en la que no desea incurrir si desea que su sitio sea rápido.
Control hacia fuera este gran guión, que se llevará a sus múltiples archivos CSS/JS y convertirlos en un archivo:
Para la descarga más rápida y la representación de una página, las reglas de rendimiento de Yahoo son correctas . Desea la menor cantidad posible de solicitudes http.
Sin embargo, en muchos sitios, simplemente no es conveniente tener un solo archivo CSS grande. Su mejor opción es organizar su CSS en tantos archivos como desee, y luego usar un script del lado del servidor para concatenar los archivos. GZIP'ing ese archivo va un largo camino, también.
Una cosa para recordar es minimizar los archivos antes de que el usuario llegue allí. La reducción en la carga de la página a menudo puede ser más lenta que la carga de varios archivos. – GSto
Absolutamente, normalmente utilizo http://groups.google.com/group/minify para tratar con la minificación, y crea un caché de archivos concatenados y minificados, y los sirve, por lo que nunca se hace sobre la marcha. –
debe usar más de un archivo CSS en lugar de usar un archivo grande. Le ayuda a la vez que mantiene su sitio a utilizar diferentes definiciones (classe o nombres de identificación) en diferentes CSS, de lo contrario tomará el que declaró más adelante.
Pero para el rendimiento se puede utilizar un archivo grande porque, Un gran archivo CSS genera menos solicitudes HTTP, lo que puede mejorar el rendimiento.
Varios archivos más pequeños conducen a una organización más fácil que hará que el desarrollo y el mantenimiento sean más baratos y fáciles.
No utilice demasiados archivos css diferentes o al menos intente ponerlos en otros dominios para acelerar la descarga por el navegador. También sugiero que use un minification tool.
Grz, Kris.
Tener un archivo CSS no solo ayuda con las solicitudes HTTP, también le dará una mejor compresión (la compresión de un archivo grande debería proporcionarle mejores resultados que la compresión de varios archivos más pequeños).
Si el rendimiento hace asuntos a que
Entonces
Si su sitio es pequeño pero obtiene un tráfico enorme y luego ir por un archivo css
si el sitio es pequeño sitios personales o de negocios a continuación, pero con menos tráfico y luego ir a css múltiples
Si CSS archivos de mantenimiento hace que los asuntos a
Entonces
Si su sitio es pequeño, con menos páginas diferentes y luego ir por un archivo CSS.
si el sitio es grande y luego ir por css múltiples http://www.killersites.com/blog/2008/how-to-organize-css/
petición HTTP de archivos CSS no hará gran diferencia en el rendimiento del sitio pequeño.
Mi estrategia de esto es simple. Separa la producción del desarrollo, tanto en archivos CSS como en archivos JS. en desarrollo, puedo tener hasta 20 archivos JS y 10 archivos CSS, la organización es super resbaladiza y fácil, siempre sé dónde está todo.
En producción, todos los archivos se minifican en archivos 1js y 1css, los cambios se realizan siempre en desarrollo y luego se "preparan" para la producción, de modo que obtengo la mantenibilidad de la aplicación y el rendimiento en producción.
Uso Yahoo Minifier para minimizar mis archivos, pero puede usar lo que sea conveniente para usted.
Buena suerte
+1. Este es el enfoque que he tomado, y es lo mejor de ambos mundos, gran facilidad de mantenimiento/organización y un gran rendimiento. La única excepción que hago es sacar jQuery del servidor de Google, ya que a menudo ya está almacenado en caché en las máquinas de las personas. – GSto
Pésalo.
Las ventajas de un archivo CSS
Ventajas de múltiples
He corregido un error tipográfico y algo de carcasa. Espero que no te moleste. En cuanto a la respuesta ... absolutamente correcto. :) –
@Gert - Siempre me complacen esas correcciones. Esta es una de las cosas que hacen TAN genial :) – Oded