herramientas css no utilizadas

Herramientas CSS no utilizadas. Análisis

Hay muchas herramientas CSS no utilizadas que tienen como objetivo ayudarlo a eliminar «CSS no usado» de su proyecto. No pasa una semana en la que no veo una herramienta para compartir o promocionar esto. Debe suponer la solución perfecta para algunos desarrolladores. Me importa el rendimiento y sé que reducir el tamaño de los archivos es bueno para el rendimiento. De hecho, es así. Apuesto a que tenemos CSS que no se usa en nuestras hojas de estilo, si eliminamos eso, eso es una victoria de rendimiento. Sí, lo sería. Deberíamos automatizar eso. Ehhhhhh, no estoy tan segura.

Hay grandes jugadores de herramientas de rendimiento que juegan con esta idea, como Lighthouse y cómo le brinda la «Cobertura» CSS y JS, que seguramente le dirá que está enviando un código que no necesita.

Las herramientas css no usadas que dicen ayudarlo con CSS no utilizado tienen que realizar análisis para poder decirle qué se usa y qué no.

Aquí hay una forma de hacer ese análisis. Renderice una página de su sitio y obtenga el DOM completo. Luego obtenga también el CSSOM completo, que puede proporcionarle una matriz de todos los selectores en su CSS. Pase sobre esos selectores y haga un querySelectoren el DOM y vea si coincide con algo. Si no lo hace, ese selector CSS no se usa.

Listo, ¿verdad?

Creo que sí. Pero ese análisis pinta una imagen bastante limitada.

Digamos que el análisis se ejecuta dos segundos después de que se completa la página, pero hay algo de JavaScript que se ejecuta e inyecta un modal después de cinco segundos. El análisis habría perdido el HTML en ese modal, que probablemente tiene estilos, y por lo tanto habría informado incorrectamente que esos estilos no se utilizan.

Entonces, el tiempo es un factor. Con suerte, estas herramientas CSS no utilizadas de análisis tiene alguna forma de configurar múltiples tiempos.

También solo estamos viendo una página hasta ahora. Por supuesto, un sitio puede tener decenas, cientos o miles de páginas. Para estar completamente seguro sobre los estilos no utilizados, deberá mirarlos todos es la apuesta más segura.

Múltiples páginas es otro factor. Con suerte, una herramienta CSS no usadas de análisis tiene una manera de ver tantas páginas como le digas. ¿Quizás puede mirar un mapa del sitio?

¿Recuerdas el momento? Podríamos pensar en el tiempo como una forma genérica de estado. Hay innumerables otras cosas que podrían estar relacionadas con el estado. ¿El usuario ha iniciado sesión o no? ¿En qué plan están? ¿Su tarjeta de crédito ha caducado, mostrando algún tipo de mensaje especial? ¿Las cosas situacionales como hora/fecha/geolocalización cambian de estado? ¿Qué pasa con los datos en tiempo real? ¿Cosas de una API?

El estado del nivel de aplicación es claramente un factor importante. Con suerte, estas herramientas css no usadas de análisis puede activar/configurar todas las combinaciones posibles de estado.

También hay un estado interactivo. ¿Qué pasa con los modales que surgen porque se hace clic en algo? ¿Qué es la pestaña activa? ¿Este menú está abierto o cerrado? ¿En qué posición de desplazamiento están? Hay infinitas permutaciones de esto. Imagine una barra de advertencia que aparece siete segundos después de que el usuario inicia sesión para advertir al usuario acerca de su tarjeta de crédito vencida que contiene un menú de selección de estilo personalizado que puede estar en estado abierto o cerrado, pero solo en la página de configuración del usuario.

Parece poco probable que estas herramientas css no utilizadas de análisis pueda manejar todas esas posibilidades. Incluso con un montón de configuraciones, simulacros y pruebas de integración, no podría cubrir las permutaciones posibles casi infinitas de todo esto.

Y sin embargo, no creo que estas herramientas sean inútiles, solo son … herramientas. Su uso en realidad puede ser un paso positivo hacia un mejor código. Su uso dice OK, lo admito, tengo un poco de miedo a nuestro CSS. Puede usar esta herramienta para conseguir una visión amplia de lo que podría ser su CSS no utilizado, luego combinarlo con su propio conocimiento base de código CSS para tomar decisiones más informadas. O tome otro paso tecnológico y haga algo como agregar una visión de fondo a esos selectores no utilizados y verificar los registros del servidor para ver si se ven afectados.

Debería decirse que toda esta idea de CSS no utilizado es parte de la saga CSS-in-JS por la que atraviesa nuestra industria. Si todos sus estilos están escritos como parte de componentes, no hay CSS sin usar. O el componente se usa y los estilos vienen con él, o no. Si eres particularmente sensible al peligro del CSS no utilizado, eso solo podría influir en una herramienta CSS-in-JS.

También se debe decir que esta técnica de análisis DOM y CSSOM es solo una forma posible de verificar los estilos no utilizados. Si tuviera algún tipo de herramientas sofisticadas que pudieran analizar todas sus plantillas, estilos y scripts, presumiblemente eso también podría determinar los estilos no utilizados.

Contenido Relacionado:

Que Es Largest Contentful Paint (LCP)O Pintura Satisfactoria Más Grande

Core Web Vitals. Cómo Medir Estas Señales De Calidad

Que es el Rendimiento Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *