Analizar y limpiar estilos CSS sin usar - Buscar selectores CSS no usados - Mostrar funciones de javascript que se están ejecutando

Cuando maquetamos una web existe la posibilidad de que haya selectores CSS innecesarios que no se estén utilizando.

Limpiar nuestros CSS y quitar esos selectores sin usar siempre es una buena idea ya que reduce el peso de los archivos CSS y por lo tanto, mejorará el rendimiento de la página.

También puede resultar muy útil en el caso de heredar un proyecto desarrollado con frameworks como Bootstrap o Foundation y no se ha optimizado.

Lo primero que vamos a aprender es a localizar manualmente y para una página individual  los estilos CSS no usados (más adelante veremos cómo hacerlo para un proyecto completo). Esto va a resultar muy útil si se quiere separar una página del proyecto global, ya que nos identifica qué selectores se están usando y los que están sin usar.

Para ello abrimos el panel Coverage de Google Chrome, al que se puede acceder de dos formas:

- Google Chrome > DevTools (F12) > Botón opciones (...) > More Tools > Coverage.

- Google Chrome > DevTools (F12) > Abrir la línea de comando (Control + Shift + P) > Teclear Coverage.

Como se ve en la imagen de arriba, lo primero que hay que hacer es capturar el contenido para ello pulsamos sobre el botón de grabar (intrument coverage).

En la parte superior izquierda podemos seleccionar cualquier archivo CSS o JavaScript y automáticamente nos va a mostrar en la parte derecha una barra vertical de color verde que nos indica los selectores CSS o funciones de JavaScript que están en uso y en rojo los que no se están utilizando.

En la parte inferior aparece una tabla que nos muestra los archivos que se están usando (URL), el tipo de archivo (Type), el tamaño del archivo (Total Bytes) y lo que ocupa lo que no se está usando de cada archivo (Unused Bytes).

Como hemos comentado anteriormente, para escanear un proyecto completo disponemos de estas aplicaciones.

JitBit Unused CSS

Es una herramienta online que nos muestra un listado con los selectores CSS sin usar de tu web. Es capaz de analizar recursivamente los enlaces de tu web.

PurifyCSS

Es una función que coge el contenido de tu web HTML/JS/PHP ... y combinado con Grunt es capaz de escanear todo nuestro contenido local en busca de clases sin usar y generar un nuevo archivo CSS totalmente limpio.

Lo hemos probado a fondo y funciona de maravilla, ya que es capaz de reconocer selectores inyectados a través de funciones avanzadas de JavaScript.

Para instalar Grunt junto con PurifyCSS y poder utilizarlo, lo más fácil es hacerlo a través del gestor de paquetes NPM (Node Package Manager) que viene integrado con Node.js

Os dejamos un vídeo tutorial de Adi Purdila donde explica cómo usar Grunt y PurifyCSS.

Ya para terminar comentaros que existen otras muchas herramientas parecidas a PurifyCSS, como PurgeCSS y UnCSS e incluso Mozilla Firefox está desarrollando su propia herramienta CSS Coverage para indicar qué partes del CSS se están utilizando, estaremos atentos a próximas actualizaciones.