Ayer miramos como combinar nuestros archivos de .JS con una interesante herramienta, hoy vamos a combinar nuestras hojas de estilos (.CSS) con el mismo propósito, minimizar la carga de nuestro sitio web y reducir las peticiones de servidor.
Antes de empezar a “unificar” es recomendable primero comprimir y validar el código.. Puedes hacerlo con estas 2 herramientas:
Comprimir CSS: Clean CSS
Validar CSS: Validator W3C
Si tienes MUCHOS errores que validar, puedes hacerlo luego, sin embargo intenta limpiar el código y comprimirlo si o si antes de unirlo.
Hecho esto, el sistema es muy simple, aunque solo es una cuestión de “copiar y pegar”, existen varias herramientas por la red para hacer este trabajo, zBugs trabajaba muy bien aunque era y sigue siendo una versión beta.. A mi personalmente me gusta y prefiero hacerlo a mano. Esto es tan fácil como, primeramente ver que archivos tenemos (.CSS)
No es recomendable unirlo todo, ni unir por unir.. En mi caso, vamos a unir 4 de los 5 archivos .css en uno solo que llamaremos “combinado.css“, es tan fácil como abrir el primer archivo, copiar y pegar en nuestro “archivo combinado”, seguidamente abrimos el segundo, copiamos y pegamos también su contenido en nuestro nuevo archivo “combinado.css”, lo mismo con todos los archivos que quieras unir.. Para tener un ‘orden’ yo te sugiero que organices el contenido de la siguiente manera, ejemplo:
/* screen.css */ <!-- contenido del archivo screen.css --> /* 960.css */ <!-- contenido del archivo 960.css --> /* project.css */ <!-- contenido del archivo project.css --> |
El resultado final sería algo así: http://contratatuweb.es/css/combinado.css
Una vez dentro todo » lo guardamos » lo renombramos como “combinados.css” » y ya solo es cuestión de hacer el nuevo “llamado” y deshabilitar lo que ya no usaremos.
De este modo, habremos ahorrado algunas peticiones al servidor y tendremos mas comodidad a la hora de editar nuestros estilos (.CSS) y es que, abrir cada uno para mirar donde está cada cosa es un verdadero calvario 
(bueno tampoco para tanto). El resultado final sería este:
Como puedes ver, pesará la suma de cada uno de los archivos que hemos unido (aprox).. Por ello es altamente recomendable comprimir los archivos antes, ya que un .css que pese mas de 20kb, hmmm no es buena idea.. (no es malo!!! pero no es buena idea).
Mas adelante, miraremos como combinar “imágenes” (sprite).. Después de todo, reduciendo aquí y allá, podemos reducir un buen número de carga de nuestro servidor y aumentar la velocidad del sitio.