Cuando cree el diseño de esta bitácora tomando como base el diseño original de WordPress para de ahí partir y lograr lo que ahora se puede ver terminé con una hoja de estilo demasiado extensa para mi gusto ya que además de las mismas clases y propiedades había agregado también comentarios dentro del propio CSS para identificar cada sección y poder ubicarme mejor en cada edición del mismo… Como lo que quería era acortarlo de forma rápida y efectiva, más allá de las posibilidades manuales, consulte con Pablo (autor de Kabytes) quien me recomendó CSS Compressor de CSS Drive Gallery…

Este servicio en línea que no requiere la instalación de ningún programa o complemento permite reducir la extensión de nuestra hoja de estilo y por ende reducir su tamaño, haciendo que este cargue más rápido en nuestro sitio y ahorrando transferencia mensual gracias a su peso reducido… Lo único que debemos hacer es pegar nuestro código de nuestra hoja de estilo seleccionar entre los tres modos de compresión y los tres modos de trata de comentarios…

Por ejemplo, para entender su funcionamiento y ver su desempeño, vamos a tomar el siguiente pedazo de código en CSS para luego pasarlo por el CSS Compressor…

[sourcecode language='css']

/* Comentario de Ejemplo */
body {
background: #f2f2f2;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #333333;
}

#page {
background: #ffffff;
text-align: left;
}

[/sourcecode]

Si seleccionamos la opción “Light” de compresión lo único que obtendremos es el borrado de espacio antes de cada propiedad, pero aún así estas se encontrarán en lineas separadas y cada clase estará dividida por un espacio en blanco… Esta es la opción menos recomendada ya que prácticamente la modificación es mínima…

[sourcecode language='css']

body{
background:#f2f2f2;
font-size:100%;
font-family:Arial,Helvetica,sans-serif;
color:#333333}

#page{
background:#ffffff;
text-align:left}

[/sourcecode]

Por otro lado si de la opción “Normal” se trata las clases estarán separadas por un espacio en blanco pero las propiedades de las mismas estarán en una única linea… La lectura de nuestra hoja de estilos sera posible y la reducción del tamaño en este caso fue de un 32%, por lo cual creo yo que es el mejor modo de compresión (es el que he utilizado en la hoja de estilos de LeegaR Blog)…

[sourcecode language='css']

body{background:#f2f2f2; font-size:100%; font-family:Arial,Helvetica,sans-serif; color:#333}

#page{background:#fff; text-align:left}

[/sourcecode]

Finalmente la última opción es “Super Compact“, lo que nos brindará una hoja de estilos al igual que el código fuente del propio Google (todo en una única línea)… Este caso es para llegar al extremo ya que no tendremos espacios en blanco ni separación por líneas de clases o propiedades, la compresión será extrema y por ende el texto ilegible… Es absurdo llegar a este caso al menos que tengamos un sitio con demasiadas visitas y un CSS que comprometa la transferencia mensual…

[sourcecode language='css']

body{background:#f2f2f2;font-size:100%;font-family:Arial,Helvetica,sans-serif;color:#333}#page{background:#fff;text-align:left}

[/sourcecode]

Finalmente respecto al manejo de comentarios es posible seleccionar si queremos abreviarlos o eliminarlos por completo… Además se encuentra una sección de opciones avanzadas que nos da acceso a diferentes formas de tratar a nuestra hoja de estilo…

Cabe destacar una sugerencia que Pablo me hizo al respecto de estas herramientas, y es el dejar en nuestra computadora la misma hoja de estilo pero sin comprimir, ya que de esta forma cuando tengamos que hacer modificaciones trabajemos en la misma sin demasiado esfuerzo (una vez hecho todos los arreglos la volvemos a comprimir y la subimos)… Les recomiendo el artículo “4 herramientas para optimizar CSS” publicado en Kabytes donde se nombran servicios similares al que se presento en este artículo… Saludos…