Detectar clases no utilizadas en… HTML

Por lo general, cuando surge “no utilizado” en una conversación sobre CSS, se trata de eliminar fragmentos de CSS que no se utilizan en su sitio o, al menos, los estilos que no se utilizan actualmente en una página específica. ¡La cantidad mínima de CSS es lo mejor! He escrito sobre cómo este es un problema difícil en el pasado. En JavaScript-land, el equivalente es sacudir árboles (eliminar JavaScript no utilizado).

Pero ¿qué pasa al revés, detectar clases en HTML que no se utilizan en tu CSS? Si supiera esto con seguridad, podría limpiar su marcado y eliminar las clases que no hacen nada.

El otro día vi a Robert Kieffer publicar un Gist con una solución interesante. La idea es cargar document.styleSheetsy encontrar todas las reglas (las que son clases). Luego, use a MutationObserverpara observar el DOM de todo el HTML y verifique el classListde cada nodo para ver si coincide con alguno de cualquier hoja de estilo. Si el HTML tiene una clase que no se encuentra en una hoja de estilo, infórmalo.

Le di una rápida vuelta y lo hice funcionar e informar correctamente las clases no utilizadas:

Su experiencia puede ser diferente. Por un lado, este script está configurado como un módulo ES. Eso significa que si simplemente importlo ejecuta y lo ejecuta en un documento HTML antiguo normal, no encontrará nada porque está script type="module"aplazado y MutationObserverno recogerá nada. Simplemente lo desmodulé y lo puse en el headpara que mi demostración funcionara.

Netlify dejé el sitio en línea en caso de que quieras profundizar en él y comprobarlo. Habría usado CodePen, pero CodePen no vincula sus estilos como linkhojas de estilo editadas (de forma predeterminada, pero puede usar recursos externos para hacerlo). Simplemente pensé que sería más claro como sitio implementado.

Cuidado ahora.

Así como el CSS no utilizado es un problema difícil debido a lo difícil que es saber con certeza si un conjunto de reglas no se utiliza, este enfoque puede ser un problema aún más difícil . Por un lado, las clases podrían usarse como un enlace de JavaScript para cosas. Es posible que se inyecten estilos en la página en stylebloques, lo que este script no verificaría. Diablos, es posible que tengas pruebas de integración que se ejecutan en CI y que usan clases para hacer cosas relacionadas con las pruebas.

Yo diría que este tipo de cosas son una herramienta útil para echar un vistazo a las clases que tienes el presentimiento de que podrían no usarse. Pero no diría que hay un permiso para ejecutar esto y luego eliminar todas las clases reportadas sin más investigación.