Herramientas para auditar CSS | Programar Plus

La auditoría de CSS no es una tarea común en la vida cotidiana de un desarrollador, pero a veces simplemente tiene que hacerlo. Tal vez sea parte de una revisión de rendimiento para identificar CSS crítico y reducir los selectores no utilizados. Tal vez sea parte del esfuerzo por mejorar la accesibilidad donde todos los colores utilizados en el código base se evaluaron para contrastar. ¡Incluso podría ser para hacer cumplir la coherencia!

Cualquiera que sea el caso y cada vez que llega ese momento, generalmente busco algunas de las herramientas que cubriré en el artículo. Pero antes de eso, veamos lo que significa “auditar” CSS en primer lugar.

  1. Fondo
  2. Conceptos básicos y terminología
  3. Propiedades de caja flexible
  4. Prefijo Flexbox
  5. Ejemplos
  6. trucos de flexbox
  7. Compatibilidad con navegador
  8. Insectos
  9. Propiedades relacionadas
  10. Más información

Auditar CSS es difícil

En general, 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 código de auditoría es relativamente sencillo: funciona o no. Pero CSS es un lenguaje específico donde la mayoría de los navegadores ignoran 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.

Se puede evitar encontrar esos errores usando una extensión para su editor de código favorito o configurando un verificador de código o linter. Pero eso no es lo que quiero mostrar aquí, y eso no es suficiente. Todavía 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, inmantenible e inestable.

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

Herramientas de desarrollo del navegador

Echemos un vistazo a las herramientas de Chrome DevTools para la auditoría de CSS. Estoy usando Brave aquí, que está basado en Chromium. También puede consultar este artículo de Umar Hansa, quien compiló un montón de excelentes funciones de DevTool que se lanzaron en 2020.

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

Inspector de rejilla y flexión

Hay muchos detalles prácticos en la interfaz de DevTools, pero mi favorito es el inspector Grid and Flex. Para habilitarlos, vaya a Configuración (un pequeño ícono de engranaje 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 depurar problemas de diseño, a veces la uso para determinar rápidamente si CSS Grid o Flexbox se usan en la página.

Descripción general de CSS

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

Descripción general de CSS es uno de ellos. Para habilitar la herramienta de 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 de descripción general de CSS, puede usar el CMD+Shift+P acceso directo, escriba “descripción general de css” y, a continuación, seleccione “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. Usualmente uso esta herramienta para tener la “sensación” de qué tan bueno o malo es el código CSS. Por ejemplo, si hay “50 tonos de gris” o demasiadas definiciones tipográficas, eso significa que no se respetó la guía de estilo o que tal vez ni siquiera exista.

Tenga en cuenta que esta herramienta resume el estilo aplicado a una página específica, no a todo el archivo.

panel de cobertura

El Cobertura La herramienta muestra la cantidad y el porcentaje de código utilizado en la página. Para verlo, utilice el CMD+Shift+P acceso directo, 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. Usualmente uso esta herramienta para entender 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 para saber, pero a veces ayuda a comprender la estrategia de almacenamiento en caché.

panel de representación

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

  • pintura tapajuntas: muestra rectángulos verdes cuando ocurre un evento de repintado. Lo uso para identificar áreas que toman demasiado tiempo para renderizar.
  • Regiones de cambio de diseño — muestra rectángulos azules cuando se produce el cambio de diseño. Para aprovechar al máximo estas opciones, generalmente configuro el ajuste preestablecido “3G lento” en la pestaña “Red”. A veces grabo mi pantalla y luego reduzco la velocidad del video para encontrar los cambios de diseño.
  • Estadísticas de representación 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 la depuración de problemas, como la emulación y la desactivación de varias funciones, forzando el prefers-color-scheme función o tipo de medio de impresión y deshabilitar las fuentes locales.

Monitor de rendimiento

Otra herramienta para auditar el rendimiento del código CSS es el Monitor de rendimiento . Para habilitarlo, utilice CMD+Shift+P nuevamente, 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 se produce la animación.

panel de rendimiento

El PAGSrendimiento El panel 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, 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 First Paint, First Contentful Paint, Layout Shifts y Largest Contentful Paint. 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é características de CSS se utilizan, la eficiencia del código y cómo funciona, todo lo cual es clave para auditar.

Herramientas en línea

DevTools es solo una herramienta que está repleta de muchas funciones. Pero hay otras herramientas disponibles que podemos usar para auditar CSS.

Visualizador de especificidad

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, podría concluir fácilmente 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

Generador de gráficos de especificidad CSSes una herramienta similar para visualizar la especificidad. Muestra un gráfico ligeramente diferente que podría ayudarlo a ver cómo se organizan 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 eso más a fondo, pero está fuera del alcance de este artículo. Sin embargo, Harry Roberts escribió extensamente al respecto en su artículo “El gráfico de especificidad”, que vale la pena consultar.

Estadísticas CSS

Estadísticas CSS 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 necesita hacer es ingresar la URL del sitio y presionar Enter. La información se segmenta en secciones significativas, desde el recuento de declaraciones hasta los colores, la tipografía, los índices z, la especificidad y más. Una vez más, es posible que desee almacenar las capturas de pantalla para consultarlas más adelante.

Proyecto Wallace

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

herramientas CLI

Además de DevTools y 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 wallace y luego el nombre del sitio. El resultado muestra todo lo que necesita saber sobre el código CSS para el sitio. Lo que más me gusta mirar es el número de veces !important se utiliza, así como cuántos ID hay en el código. Otra buena información es el número de especificidad superior y cuántos selectores lo usan. Estas pueden ser señales de alerta de código “malo”.

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

csscss

El csscssLa herramienta CLI muestra qué reglas comparten las mismas declaraciones. Esto es útil para identificar código duplicado y oportunidades para reducir la cantidad de código que se escribe. Lo pensaría dos veces antes de hacerlo, ya que podría no valer la pena, especialmente con los mecanismos de almacenamiento en caché de hoy. Vale la pena mencionar que csscss requiere Ruby.

Otras herramientas útiles

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

  • Clasificador de color: ordene los colores CSS por tono y luego por saturación.
  • Analizador de CSS: genere 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: elimine todo el CSS de una página.
  • uCSS: rastrea sitios web para identificar CSS sin usar.

Conclusión

CSS está en todas partes a nuestro alrededor, y debemos considerarlo un ciudadano de primera clase de cada proyecto. No importa lo que otras personas piensen sobre tu CSS, pero lo que tú pienses al respecto sí importa. Si su CSS está organizado y bien escrito, pasará menos tiempo depurándolo y más tiempo desarrollando nuevas funciones. En un mundo ideal, educaríamos a todos para escribir 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 base de código 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 hacer que más desarrolladores escriban el código CSS con más respeto. Incluso comencé un nuevo proyecto en css-auditors.com (¡bien por los nombres de dominio con guión!) que está dedicado a auditar CSS.

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

(Visited 12 times, 1 visits today)