Herramientas para auditar CSS

Auditar CSS no es una tarea común en la vida diaria de un desarrollador, pero a veces simplemente hay que hacerlo. Tal vez sea parte de una revisión de rendimiento para identificar CSS crítico y reducir los selectores no utilizados. Quizás sea parte del esfuerzo para mejorar la accesibilidad donde todos los colores utilizados en el código base se evalúan para determinar el contraste. ¡Incluso podría ser para imponer coherencia!

Cualquiera sea el caso y cuando llegue ese momento, normalmente recurrirá a algunas de las herramientas que cubriré en el artículo. Pero antes de eso, veamos qué significa “auditar” CSS en primer lugar.

Auditar CSS es difícil

Generalmente, la auditoría de código implica analizar el código para encontrar errores u otras irregularidades, como posibles problemas de rendimiento. Para la mayoría de los lenguajes de programación, el concepto de auditoría de código es relativamente sencillo: funciona o no. Pero CSS es un lenguaje específico donde los navegadores ignoran la mayoría de los errores. Luego está el hecho de que puedes lograr el mismo estilo de muchas maneras diferentes. Esto hace que CSS sea un poco complicado de auditar, por decir lo menos.

Es posible evitar encontrar esos errores utilizando una extensión para su editor de código favorito o configurando un linter o un verificador de código. Pero eso no es lo que quiero mostrar aquí y no es suficiente. Aún podríamos usar demasiados colores, definiciones tipográficas o índices z, todo lo cual podría conducir a una base de código CSS desordenada, imposible de mantener e inestable.

Para auditar verdaderamente CSS, necesitaríamos profundizar más y encontrar lugares que no se consideren mejores prácticas. Para encontrar esos lugares, podríamos utilizar las herramientas.

Herramientas de desarrollo del navegador

Echemos un vistazo a las herramientas Chrome DevTools para análisis de CSS. Estoy usando Brave aquí, que está basado en Chromium. Es posible que también desees consultar este artículo de Umar Hansa, quien recopiló una gran cantidad de funciones excelentes de DevTool que se lanzaron en 2020.

Si le gusta inspeccionar el código CSS manualmente, existe la herramienta Inspeccionar . Usando eso, podríamos ver el código CSS aplicado a un elemento específico. Usando la “flecha de inspección” podríamos incluso ver detalles adicionales sobre colores, fuentes, tamaño y accesibilidad.

Inspector de cuadrícula y flexión

Hay muchos detalles prácticos en la interfaz de DevTools, pero mi favorito es el inspector Grid y Flex. Para habilitarlos, vaya a Configuración (un pequeño ícono de ajustes en la parte superior derecha de DevTools), haga clic en Experimentos, luego habilite las funciones de depuración de CSS Grid y Flexbox. Aunque esta herramienta se usa principalmente para solucionar problemas de diseño, a veces la uso para determinar rápidamente si se usa CSS Grid o Flexbox en la página.

Descripción general de CSS

Inspeccionar CSS es bastante básico y todo debe hacerse manualmente. Veamos algunas funciones más avanzadas de DevTools.

Descripción general de CSS es uno de ellos. Para habilitar la herramienta Descripción general de CSS, vaya a Configuración, haga clic en Experimentos y habilite la opción Descripción general de CSS. Para abrir el panel Descripción general de CSS, puede usar el acceso directo CMD+ Shift+ P, escribir “descripción general de CSS” y luego seleccionar “Mostrar descripción general de CSS”. Esta herramienta resume las propiedades de CSS como colores, fuentes, problemas de contraste, declaraciones no utilizadas y consultas de medios. Normalmente uso esta herramienta para tener una “sensación” de qué tan bueno o malo es el código CSS. Por ejemplo, si hay “50 sombras de gris” o demasiadas definiciones tipográficas, eso significa que no se respetó la guía de estilo, o puede que ni siquiera exista.

Panel de cobertura

La herramienta Cobertura muestra la cantidad y el porcentaje de código utilizado en la página. Para verlo, use el acceso directo CMD+ Shift+ P, escriba “cobertura”, seleccione Mostrar cobertura y haga clic en el icono “actualizar”.

Puede filtrar solo archivos CSS escribiendo “.css” en la entrada del filtro de URL. Normalmente utilice esta herramienta para comprender la técnica de entrega del sitio. Por ejemplo, si veo que la cobertura es bastante alta, podría suponer que el archivo CSS se genera para cada página por separado. Puede que no sean datos críticos conocerlos, pero a veces ayuda a comprender la estrategia de almacenamiento en caché.

Panel de renderizado

El panel de renderizado R es otra herramienta útil. Para abrir el panel Renderizado, use + + nuevamente, escriba “renderizado” esta vez y elija la opción “Mostrar renderizado”. Esta herramienta tiene muchas opciones, pero mis favoritas son:CMDShiftP

• Pintura parpadeante  : muestra rectángulos verdes cuando ocurre un evento de repintado. Lo uso para identificar áreas que requieren demasiado tiempo para renderizarse.
• Regiones de cambio de diseño  : muestran rectángulos azules cuando se produce el cambio de diseño. Para aprovechar al máximo estas opciones, normalmente configure el ajuste preestablecido “3G lento” en la pestaña “Red”. A veces grabo mi pantalla y luego ralentizo el vídeo para encontrar los cambios de diseño.
• Estadísticas de renderizado de fotogramas  : muestra el uso en tiempo real de GPU y fotogramas. Esta herramienta es útil para identificar animaciones pesadas y problemas de desplazamiento.

Estas herramientas son algo que la auditoría regular no implica, pero me parece esencial comprender si el código CSS funciona y no agota la energía de un dispositivo.

Otras opciones pueden ser más beneficiosas para solucionar problemas, como la emulación y la desactivación de varias funciones, forzar la prefers-color-schemefunción o el tipo de medio impreso y desactivar las fuentes locales.

Monitorear el rendimiento

Otra herramienta para auditar el código CSS de rendimiento es el Monitor de rendimiento . Para habilitarlo, use CMD+ Shift+ Pnuevamente, escriba "monitor de rendimiento" y seleccione la opción Mostrar monitor de rendimiento. Normalmente uso esta herramienta para ver cuántos recálculos y diseños se activan al interactuar con la página o cuando ocurre la animación.

Panel de rendimiento

El panel Rendimiento muestra una vista detallada de todos los eventos del navegador durante la carga de la página . Para habilitar la herramienta Rendimiento, haga CMD+ Shift+ P, escriba "rendimiento", seleccione Mostrar rendimiento y luego haga clic en el icono "recargar". Normalmente habilito las opciones "Capturas de pantalla" y "Web Vitals". Las métricas más interesantes para mí son Primera pintura, Primera pintura con contenido, Cambios de diseño y Pintura con contenido más grande. También hay un gráfico circular que muestra el tiempo de pintura y renderizado.

Es posible que DevTools no se considere una herramienta de auditoría clásica, pero nos ayuda a comprender qué funciones CSS se utilizan, la eficiencia del código y su rendimiento, todos los cuales son aspectos clave para auditar.

Herramientas en línea

DevTools es sólo una herramienta que incluye muchas funciones. Pero hay otras herramientas disponibles que podemos utilizar para auditar CSS.

Visualizador de especificidad

El visualizador de especificidad muestra la especificidad de los selectores de CSS en el código base. Simplemente visite el sitio y pegue el CSS.

El gráfico principal muestra la especificidad en relación con la ubicación en la hoja de estilo. Los otros dos gráficos muestran el uso de especificidades. A menudo uso este sitio para encontrar selectores "malos". Por ejemplo, si veo muchas especificidades marcadas en rojo, fácilmente podría concluir que el código podría ser mejor. Es útil guardar las capturas de pantalla como referencia mientras trabaja para mejorar las cosas.

Generador de gráficos de especificidad CSS

CSS Specificity Graph Generator es una herramienta similar para visualizar la especificidad. Muestra un gráfico ligeramente diferente que puede ayudarle a ver cómo están organizados sus selectores de CSS por especificidad. Como dice en la página de la herramienta, "los picos son malos y la tendencia general debería ser hacia una mayor especificidad más adelante en la hoja de estilo". Sería interesante discutir esto más a fondo, pero está fuera del alcance de este artículo. Sin embargo, Harry Roberts escribió extensamente sobre ello en su artículo "El gráfico de especificidad", que vale la pena consultar.

Estadísticas CSS

CSS Stats es otra herramienta que proporciona análisis y visualizaciones para sus hojas de estilo. De hecho, Robin escribió sobre esto hace un tiempo y mostró cómo lo usó para auditar la hoja de estilo en su trabajo.

Todo lo que necesitas hacer es ingresar la URL del sitio y presionar Enter. La información está segmentada en secciones significativas, desde el recuento de declaraciones hasta los colores, la tipografía, los índices z, la especificidad y más. Nuevamente, es posible que desees almacenar las capturas de pantalla para consultarlas en el futuro.

Proyecto Wallace

El Proyecto Wallace fue creado por Bart Veneman, quien ya presentó el proyecto aquí en CSS-Tricks. El poder del Proyecto Wallace es que puede comparar y visualizar cambios basados ​​en importaciones. Eso significa que puede ver los estados anteriores de su base de código CSS y ver cómo su código cambia entre estados. Esta característica me parece bastante útil, especialmente cuando quieres convencer a alguien de que el código ha sido mejorado. La herramienta es gratuita para un solo proyecto y ofrece planes pagos para más proyectos.

herramientas CLI

Además de DevTools y las herramientas en línea, existen herramientas de interfaz de línea de comandos (CLI) que pueden ayudar a auditar CSS.

wallace

Una de mis herramientas CLI favoritas es Wallace . Una vez instalado, escriba wallacey luego el nombre del sitio. El resultado muestra todo lo que necesita saber sobre el código CSS del sitio. Lo que más me gusta mirar es la cantidad de veces !importantque se usa, así como también cuántas identificaciones hay en el código. Otro dato interesante es el número de especificidad superior y cuántos selectores lo utilizan. Estas podrían ser señales de alerta de un código "incorrecto".

Lo que más me gusta de esta herramienta es que extrae todo el código CSS del sitio, no sólo archivos externos, sino también código en línea. Es por eso que el informe de CSS Stats y Wallace no coinciden.

csscss

La herramienta CLI csscss muestra qué reglas comparten las mismas declaraciones. Esto es útil para identificar código duplicado y oportunidades para reducir la cantidad de código escrito. Lo pensaría dos veces antes de hacerlo, ya que puede que no valga la pena, especialmente con los mecanismos de almacenamiento en caché actuales. Cabe mencionar que csscss requiere Ruby.

Otras herramientas útiles

Es posible que otras herramientas CSS no se utilicen para la auditoría, pero siguen siendo útiles. Enumerémoslos también:

• Clasificador de colores: ordena los colores CSS por tono y luego por saturación.
• Analizador de CSS: genera un análisis para una cadena de CSS.
• constyble: este es un linter de complejidad CSS, basado en CSS Analyzer.
• Extraiga CSS ahora: obtenga todo el CSS de una sola página web.
• Obtener CSS: elimina todo el CSS de una página.
• uCSS: rastrea sitios web para identificar CSS no utilizado.

Conclusión

CSS está en todas partes a nuestro alrededor y debemos considerarlo un ciudadano de primera clase en cada proyecto. No importa lo que otras personas piensen sobre tu CSS, pero lo que tú pienses realmente importa. Si su CSS está organizado y bien escrito, dedicará menos tiempo a depurarlo y más tiempo a desarrollar nuevas funciones. En un mundo ideal, educaríamos a todos para que escribieran un buen CSS, pero eso lleva tiempo.

Que hoy sea el día en que empieces a cuidar tu código CSS.

Sé que auditar CSS no será divertido para todos. Pero si ejecuta su código con cualquiera de estas herramientas e intenta mejorar incluso una parte de su código base CSS, entonces esta publicación ha hecho su trabajo.

Últimamente estoy pensando cada vez más en el código CSS y estoy tratando de que más desarrolladores escriban el código CSS de manera más respetuosa. Incluso comencé un nuevo proyecto en css-auditors.com (¡sí, por los nombres de dominio con guiones!) que se dedica a auditar CSS.

Si conoces alguna otra herramienta, házmelo saber en los comentarios.