CSS Beautifier: quita el código que sobra de tu CSS

En un día en el que los cambios nos abatían, el teléfono no paraba de sonar y los emails de llegar, alguien sugirió:

“Estamos haciendo cambios a velocidad de Halcón Milenario sobre nuestros CSS’s y HTML’s pero necesitamos subir los cambios y no podemos estar perfilando y estando pendientes de las reglas que han quedado sin uso en el CSS”
Naomi dixit

De primeras no me gustó la idea, solo faltaba en mi tiempo libre tener que ponerme a hacer una landing page, pero una bombilla se iluminó y la “receta” quedó así:

Primer plato. Análisis:
1 x Ordenador con acceso a internet
1 x Pizarra
4 x Tizas de colores

Una vez hayamos mirado el ordenador bastante y tengamos la pizarra llena de rayajos (también conocidos como esquemas) ya habremos pasado lo peor y podemos empezar con el plato principal.

Segundo plato. Desarrollo Back End:
1 x PHP. Mirar que no esté caducado y sea versión 5.3 como mínimo
Una pizca de FrameWorks
Un puñao de REST APIs

Mientras dejamos reposar esta parte en GitHub y que se testee bien, preparamos el postre:

Postre. Front-End:
1 x Desarrollador Front End. En mi caso, he usado uno de las mejores cosechas malagueñas 😉
1 x JS
1 x Ember JS
2 x CSS

Lo compilamos todo, lo testeamos y lo subimos…

Como resultado, nos ha salido esta pequeña criaturica:

http://www.cssbeautifier.com/

Con esta primera versión, cualquiera puede cargar una URL de una página en concreto y analizar todos los CSS que actúan sobre esa página y nos devolverá ese mismo CSS sin las reglas que ya no se usaban y encima, comprimido para dejar contento al PageSpeed Insights de Google.

Queda mucho por delante, pero ya tenemos esta primera Release para que pueda ser útil desde ya a diseñadores, desarrolladores, maquetadores, etc. y que sus CSS tengan menos “restos”.

Disfrutadlo, compartirlo y sobretodo: ¡que os resulte útil! 😉

Si quieres ver las APIs Back End puedes hacerlo en: github.com/avara1986/CSSBeautifier

Si quieres ver el Front End puedes verlo en: github.com/josex2r/CSSBeautifier-Front

Deja un comentario