Desde el HTML llamamos a un solo archivo CSS, llamado main.css. Este contiene varios @import que cargan los distintos archivos CSS. Esto funciona perfectamente en el entrono de desarrollo y nos permite mantener separados los distintos CSS.

Para subir a producción, ejecutamos un script PHP que lee el main.css, coge cada uno de los archivos CSS allí referenciados, los comprime, los concatena y los guarda en el propio main.css. De esta forma tenemos el CSS comprimido en un único archivo y no necesitamos editar nada en el HTML para que todo siga funcionando correctamente.

Para el tema del caching usamos el .htaccess donde le definimos un tiempo de expiración muy largo para los archivos CSS. Pero cuando el CSS es modificado nos interesa que el navegador se lo vuelva a descargar. Para conseguirlo basta con añadir el timestamp de modificación del archivo main.css en la URL: href=”main.css?v=1228209925″

Este mismo mecanismo se puede usar también para los archivos JS (en nuestro caso usando JSMIN para comprimirlos).

Un saludo!

He estado haciendo pruebas, y parece que si (cambiando, por supuesto el text/css del Content-type por application/x-javascript).

Sin embargo, hay algo que me mosquea en los datos que tira el firebug…

Para el css, la cabecera contiene estos datos:
Content-Encoding gzip
Vary Accept-Encoding
Content-Length 1371
Keep-Alive timeout=15, max=98
Connection Keep-Alive
Content-Type text/css

Y el javascript:
Content-Encoding gzip
Vary Accept-Encoding
Keep-Alive timeout=15, max=97
Connection Keep-Alive
Transfer-Encoding chunked
Content-Type application/x-javascript

Ese transfer-encoding: chunked es producto de la compresión, ok… pero, ¿puede llegar a influir en algo? Es más… porque al css no se le aplica esta codificación para la transferencia y al js si??

Un saludo