OmbuShop Crea Tu Tienda Online

Herramientas para refactorear CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

El código CSS puede volverse complejo y difícil de mantener. Aquí listamos algunas herramientas útiles para el análisis y refactoreo del código CSS.

Como sabemos, luego de trabajar semanas o meses en un proyecto el código CSS puede comenzar a contener código repetido, colores que son el mismo pero no exactamente, selectores largos y demasiado específicos, complejidad creciente y hojas de estilo cuyo peso significa un problema.

Si bien un análisis minucioso por parte de un ser humano es necesario, existen algunas herramientas que facilitarán el trabajo.

Las herramientas:

  • CSS Lint: realizará un análisis exhaustivo de errores o incluso potenciales problemas. Indicará con precisión cuál es la causa de cada uno de los problemas y a qué navegador/es afecta.
  • StyleStats: analizará una página web a partir de su URL, extraerá los estilos que están siendo aplicados a dicha página web y mostrará un resumen de las estadísticas más importantes: cantidad de colores, cantidad de cuerpos tipográficos distintos, cuántos selectores complejos hay en las hojas de estilos, cuán complejo es el selector más complejo, etc. Todo a la vista en forma de dashboard.
  • Type-o-matic: un plugin para Firefox que hará un reporte de todas las tipografías siendo utilizadas y sus respectivos colores.
  • CSS Colorguard: escrito en node, ayudará a encontrar colores que —por estar demasiado cerca— deberían ser el mismo. Se trata de un error muy común, ocasionado por el uso y abuso del color picker.
  • Dust-Me Selectors: se trata de otro plugin de Firefox, en este caso se ocupará de chequear cuáles selectores no están siendo utilizados en una página.

Esperamos que puedan utilizarlas para próximos sitios y tiendas online!