2

Combinar las hojas de estilo (.CSS) en una

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (3 votos, promedio: 5,00 de 5)
Loading ... Loading ...

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)

combinar-unir-minimizar-cssNo 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.

habilitar-llamada-cssDe 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 :D (bueno tampoco para tanto). El resultado final sería este:

combinado-2Como 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.

Comparte!

LuisLY

Soy Luis LY, la mayor parte de mi tiempo lo invierto aprendiendo y compartiendo sobre Diseño Web, Marketing y SEO.

2 Comments

  1. Madre mía Luis.. Buenísimo tanto éste, como el anterior post. Eso si, recomendable para los no iniciados (yo) que se lo tomen con calma y siempre guardando copias de seguridad antes de aventurarse.
    Por cierto, yo doy fe de que tu sitio va como un tiro, te lo aseguro.. el viernes 11 hablo de ello ;)
    Un abrazo crack

    • Exactamente compi.. Los problemas están a la orden del día.. Y lo mismo puede salir mas caro el remedio que la enfermedad =S
      Y por cierto, me lo prometes? Yo es que soy muy friki del performance, nunca es demasiado para mi.. Todos los días busco la manera de optimizar mas y mas la carga del sitio, y que como diría Bruce Lee “todos los días podemos mejorar” :)
      Esperare ansioso ese artículo :D

      Un abrazo amigo.

Deja un comentario