4 herramientas para auditar y optimizar CSS

Una vez que su sitio web comience a crecer, también lo hará su código.. A medida que su código se expande, CSS puede volverse difícil de mantener y usted puede terminar sobrescribiendo una regla CSS con otra. Esto complica las cosas y probablemente terminará con muchos errores..

Si esto te está sucediendo, es hora de que audita el CSS de tu sitio. La auditoría de su CSS le permitirá identificar partes de su CSS que no están optimizadas. También puede reducir el tamaño de los archivos de la hoja de estilo eliminando las líneas de código que ralentizan el rendimiento de su sitio..

Aquí hay 5 buenas herramientas para ayudarlo a auditar y optimizar CSS.

Tipo-o-matic

Tipo-o-matic es un complemento de Firebug para analizar las fuentes que se utilizan en un sitio web. Este complemento proporciona un informe visual en una tabla, con las propiedades de la fuente, como la familia de fuentes, el tamaño, el peso, el color y también el número de veces que se utiliza la fuente en la página web. A través de la tabla de informes, puede optimizar fácilmente el uso de la fuente, eliminar lo que no es necesario o combinar estilos que son muy similares.

CSS Lint

CSS Lint es un forro herramienta que analiza la sintaxis de CSS en función de parámetros específicos que abordan el rendimiento, la accesibilidad y la compatibilidad de su CSS. Usted se sorprendería con los resultados, espere muchas advertencias en su CSS. Sin embargo, estos errores lo ayudarán a corregir la sintaxis de CSS y la harán más eficiente. Además, también serás un mejor escritor de CSS.

CSS ColorGuard

CSS ColorGuard Es una herramienta relativamente nueva. Está construido como un módulo Node y se ejecuta en todas las plataformas: Windows, OS X y Linux. CSS ColorGuard es una herramienta de línea de comandos que le notificará si está utilizando colores similares en su hoja de estilo; p.ej. # f3f3f3 está bastante cerca de # f4f4f4, por lo que es posible que desee considerar la fusión de los dos. CSS ColorGuard es configurable, puede establecer el umbral de similitud y los colores que desea que la herramienta ignore..

CSS Dig

CSS Dig es un script de Python y funciona localmente en su computadora. CSS Dig ejecutará un examen completo en su CSS. Leerá y combinará propiedades, p. Todas las declaraciones de color de fondo irán debajo de la sección de fondo. De esa manera, puede tomar decisiones fácilmente en función del informe cuando intente estandarizar su sintaxis CSS, por ejemplo. Puede encontrar color en todos los estilos con la siguiente declaración de color..

 color: #ccc; color: #cccccc; color: #CCC; color: #CCCCCC; 

Estas declaraciones de color hacen lo mismo. Usted también podría ir con el #ccc o con la capital #CCC como la norma. CSS Dig también puede exponer esta redundancia a otras propiedades de CSS, y usted podrá hacer que su código sea más consistente.