Como eliminar CSS que no utilizas en tus proyectos

He podido utilizar a lo largo de varios años diferentes aplicaciones para optimizar y comprobar tanto los ficheros JavaScript como los ficheros CSS de mis proyectos.

También he utilizando diversas herramientas para comprimir (minify) ficheros JavaScript, entre ellas, YUI Compressor desarrollado por Yahoo y Closure Compiler desarrollado por Google son de las que mejor experiencia y opinión tengo.

En este caso me gustaría hablar sobre grunt-uncss, una herramienta de línea de comandos (sí, lo sé, tengo gran predilección por los entornos Unix/Linux) que permite revisar, comprobar y eliminar toda esa gran cantidad de código CSS que, en realidad, no estamos utilizando en nuestros proyectos.

Resulta bastante habitual comenzar a desarrollar, haciendo algunas pruebas para desarrollar una pequeña maqueta e ir plasmando “en papel” las ideas que teníamos rondando en nuestra cabeza. Cuando la maqueta empieza a  tomar cuerpo y nos convence deberíamos tirarlo todo a la basura y comenzar desde cero con un código limpio, claro y bien estructurado.

Pero esta no es la realidad, a mucha gente le gusta escribir lo menos posible, así que cogen la maqueta y siguen adelante hasta finalizar el proyecto.

El resultado es que tenemos mucho código y muchas librerías que ya no utilizamos. Si lo dejamos ahí podemos conseguir producir errores innecesarios, sobrecargar el servidor y que la experiencia de usuario sea un desastre.

Si conseguimos limpiar y optimizar nuestro código, el servidor descargará menos información en el cliente, con lo que la respuesta final será más rápida y el usuario quedará más agradecido.

Esta práctica viene siendo habitual en el desarrollo JavaScript. Como comentaba antes, utilizar aplicaciones de compresión de código ayudan a reducir sustancialmente el tamaño de nuestros ficheros y así conseguir una mejor experiencia para nuestros usuarios.

La herramienta grunt-uncss permite recorrer todos los ficheros que componen nuestro proyecto, analizar qué selectores y estilos CSS estamos utilizando y cuáles no y hacer una limpieza para que todo el contenido se reduzca sustancialmente.

Realizar esta práctica es más necesario cada día que pasa. Muchos desarrolladores utilizan librerías JavaScript/CSS para desarrollar sus proyectos web más rápidamente, un ejemplo de de ello son las librerías jQuery, Modernizr, Bootstrap, Pure, Fundation, Compass, Font Awesome, etc.

Esto es fantástico porque puedes disponer de un framework de desarrollo genial y rápidamente desarrollar tus proyectos, pero al finalizar el proyecto convendría hacer una limpieza de todo lo que no estemos utilizando.

Estos frameworks suelen ser generales y grandes para poder cubrir la mayoría de las necesidades de casi cualquier programador, y por este motivo, cuando finalizas tu desarrollo puedes tener muchos selectores, estilos y código que no estés utilizando.

Limpiando este código innecesario conseguirás ahorrar mucho espacio, o lo que es lo mismo tiempo, y mejorar la velocidad de carga de tus proyectos web. Esto es algo muy de agradecer si pensamos que cada vez más gente utiliza sus terminales móviles para acceder a la web y en muchos casos, aún hay conexiones que no son de alta velocidad.

Volviendo a grunt-uncss, es una herramienta que, como has podido adivinar, necesitará Grunt, que es una herramienta que permite ejecutar de manera automática tareas repetitivas como la compresión, revisión, ofuscación, pruebas unitarias, etc.

Tan sencillo como configurar grunt-uncss creando un fichero de texto con los parámetros básicos y ejecutar:

grunt uncss

Así podremos ver como nuestros ficheros pasan de un tamaño a otro en cuestión de segundos.

Artículo escrito por 

…………………………

Referencias:

https://github.com/addyosmani/grunt-uncss

http://gruntjs.com/