Una vez que tu sitio web comience a crecer, tendrás que vigilar el código. A medida que el código se expande, el CSS puede llegar a ser, de repente, difícil de mantener, y usted puedes terminar sobrescribiendo una regla CSS con otra. Esto complica las cosas y probablemente vas a terminar con un montón de errores.
Si esto te está ocurriendo, es el momento de optimizar el CSS de tu sitio web. Auditar el CSS te permitirá identificar porciones de tu CSS que no están optimizadas. También puedes reducir el tamaño de la hoja de estilos mediante la eliminación de líneas de código, que posiblemente esté ralentizando el rendimiento de tu web.
Aquí tienes 5 buenas herramientas para ayudarte a auditar y optimizar tu CSS.
Type-o-matic
Tipo-o-matic es un plugin de Firebug para analizar las fuentes que se utilizan en una página web. Este plugin proporciona un informe visual en una tabla, mostrando propiedades de las fuentes tales como la familia de la fuente, el tamaño, el peso, el color, y también el número de veces que la fuente se utiliza en la página web. A través de la tabla de informes, puedes optimizar fácilmente el uso de la fuente, eliminar lo que no sea necesario o combinar estilos que son muy similares.
CSS Lint
CSS Lint es una herramienta que analiza la sintaxis de tus CSS basándose en parámetros específicos que tratan sobre el rendimiento, la accesibilidad y la compatibilidad del CSS. Te sorprenderás con los resultados, asi que espera un montón de advertencias en tu CSS. Sin embargo, estos errores con el tiempo te ayudarán a optimizar la sintaxis de tus CSS, y así hacerlos más eficientes. Además, te ayudará a implementar mucho mejor tus códigos.
CSS ColorGuard
CSS ColorGuard es una herramienta relativamente nueva. Está construida como un módulo Node y funciona en todas las plataformas: Windows, OS X y Linux. CSS ColorGuard es una herramienta online de comandos que te avisará si utilizas colores similares en tu hoja de estilo; por ejemplo # f3f3f3 está bastante cerca de # F4F4F4, por lo que es posible que desees considerar la fusión de los dos. CSS ColorGuard es configurable, se puede establecer el umbral de similitud, así como establecer los colores que quieres que la herramienta ignore.
CSS Dig
CSS Dig es un script de Python y funciona de forma local en tu ordenador. CSS Dig ejecutará un analisis a fondo en tu CSS. Él leerá y combinará propiedades de tu código, por ejemplo, todas las declaraciones del color de fondo irán debajo de la sección de background. De esta manera puedes fácilmente tomar decisiones basadas en el informe cuando se trate de normalizar la sintaxis de tu CSS. Por ejemplo, puedes encontrar un color con la siguiente declaración de color.
color: #ccc; color: #cccccc; color: #CCC; color: #CCCCCC;
Estas declaraciones de color hacen lo mismo. CSS Dig puede exponer esta redundancia para otras propiedades CSS también, y serás capaz de hacer que el código sea más consistente.
Dust-Me
Dust-Me es un add-on para Firefox y Opera que mostrará los selectores no utilizados en tu hoja de estilos. Es capaz de analizar todas las hojas de estilo y los selectores que se encuentran en tu sitio web y encontrar aquellos que en realidad ni se están utilizando en la página web. Esto se muestra en un informe, puedse pulsar el botón Limpiar y limpiará los selectores no utilizados, para guardarlos en un nuevo archivo CSS.