Buscador de CSS no utilizado
Encuentra reglas muertas y quítalas

Qué hace un buscador de CSS no utilizado

Las hojas de estilo siempre crecen. Añades funciones y cambias el diseño, y el código viejo se queda. Como resultado, cada visitante descarga estilos para partes de tu sitio que ya no se ven.

Un buscador de CSS no utilizado responde una pregunta. ¿Qué reglas pueden irse sin cambiar cómo se ve ninguna página? Por eso este lee tu HTML, tu CSS y tu JavaScript. Luego pone cada regla en uno de cuatro grupos.

Los grupos son fáciles de leer. Primero, reglas que nada usa. Después, reglas donde solo algunos selectores de la lista coinciden. Luego, reglas que se quedan porque un script podría necesitarlas. Por último, reglas que tus páginas usan ahora mismo.

El resultado es un plan, no una apuesta. Cada regla trae su razón, así que puedes revisarla antes de borrar nada. Después, descargas la hoja limpia en un solo paso.

Cómo lee tu código este buscador de CSS no utilizado

El trabajo se hace en tres pasadas. Primero, la página convierte tu HTML en un árbol de elementos, cada uno con su clase, id y atributos. Luego lee tu CSS y separa cada lista de selectores en selectores sueltos. Por último, prueba cada selector contra cada elemento.

Tu navegador hace todo esto. Como este sitio bloquea formas inseguras de leer marcado, el buscador usa su propio lector. Así que nunca ejecuta el código que pegas, y un script pegado no hace nada.

La comparación sigue las reglas reales de CSS. Por ejemplo, un espacio significa descendiente y un signo mayor que significa hijo. Además, :nth-child cuenta hermanos igual que un navegador. Así que cuando un selector no encaja con tu marcado, el informe lo dice.

Encuentra CSS no utilizado en varias páginas

Una sola página casi nunca muestra todo. Por ejemplo, una regla del pago parece muerta en la portada, pero el pago la necesita. Por eso esta herramienta acepta todas las páginas que le des.

Puedes pegar varias páginas en un solo cuadro. Solo empieza cada página nueva con una línea de comentario que diga page. O sube tus archivos HTML, y cada archivo cuenta como una página.

Cada regla usada también dice dónde vive. Por ejemplo, usada en 2 de 5 páginas te dice que un estilo pertenece a una plantilla. Así que esta pista ayuda cuando más tarde divides una hoja grande en otras más pequeñas.

Por qué una página no basta

La mayoría de los sitios comparten una hoja entre muchas plantillas. Así que si pruebas una sola página, cerca de la mitad del archivo parece sin uso, y eso es falso. Pero añade una página de producto, una entrada de blog y un formulario de contacto, y aparece el peso muerto real.

La regla práctica es simple. Añade una página de cada tipo que tenga tu sitio, porque el buscador solo puede juzgar las páginas que ve.

Clases que tu JavaScript añade después

Los menús se abren, las pestañas cambian y aparecen ventanas. Cada cosa añade una clase con un script, así que la clase no está en el HTML al principio. Como resultado, una herramienta descuidada llama sin uso a esas reglas, y borrarlas rompe el menú.

Este buscador también lee tus scripts. Recoge cada cadena que tienen, incluso las partes de las plantillas de texto. Así que si un script menciona is-open, la regla de .menu.is-open se queda, con una etiqueta en vez de borrarse.

Los prefijos también cuentan. Por ejemplo, un script que arma btn--${state} puede crear cualquier clase que empiece por btn--. Por lo tanto, cada regla de esas clases se queda, y la etiqueta explica por qué.

Los enlaces de los frameworks reciben el mismo cuidado. El buscador revisa los atributos de clase de Vue, Alpine y Angular, además de los atributos data y los eventos en línea. En resumen, cubre los sitios habituales de donde salen clases ocultas.

La lista segura para todo lo demás

Algunas clases vienen de lugares que ninguna herramienta puede leer. Por ejemplo, un plugin puede añadirlas en el servidor, o un editor puede escribirlas a mano. Para esas, usa la lista segura.

Cada línea acepta un nombre de clase, un nombre con asterisco o un patrón entre barras. Así wp-* conserva todas las clases de WordPress. Además, un patrón como /^is-/ conserva todas las clases de estado de una vez.

Pseudoclases, pseudoelementos y estados

Muchas herramientas de CSS no utilizado fallan justo aquí. Buscan .card::after o .menu summary::before, no encuentran ese elemento y dan la regla por muerta. Pero un pseudo-element da estilo a una parte de su elemento. Así que la regla cuenta como usada siempre que el elemento exista.

Los estados funcionan igual. Cuando una página carga, nadie ha pasado el ratón, enfocado ni marcado nada todavía. Sin embargo, los visitantes pronto empiezan a pasar el ratón y hacer clic. Por eso :hover, :focus y :checked cuentan aquí como alcanzables.

Aun así, la estructura cuenta. Por ejemplo, li:nth-child(4) en una lista de tres elementos nunca coincide, porque ningún clic puede añadir un cuarto elemento. En resumen, el buscador solo conserva lo que de verdad podría coincidir.

Un limpiador de CSS no utilizado que respeta tu formato

Encontrar reglas muertas es solo la mitad del trabajo. La otra mitad es un archivo limpio que puedas publicar. Por eso este limpiador corta las reglas muertas de tu propio texto. No reconstruye tu hoja de estilos.

Tus comentarios, espacios y orden se quedan. Cuando solo una parte de una lista de selectores está muerta, solo se va esa parte. Además, el limpiador quita las media queries vacías.

Tú eliges la forma del resultado. Déjalo legible para tu proyecto, o marca minificar para una copia más pequeña. Luego cópialo, o descárgalo junto al informe CSV.

@keyframes, fuentes y variables muertas

Las reglas no son el único peso muerto. Una animación sin uso, una fuente sin uso y una propiedad personalizada que nadie lee también cuestan bytes. Por eso el buscador lista cada una bajo su propio título.

Esta revisión corre cuando las reglas muertas ya se fueron. Como resultado, el buscador también marca una fuente como sin uso cuando solo la usaba una regla quitada. Una búsqueda de texto normal no lo vería.

También detecta el error contrario. Si una regla lee una propiedad personalizada que nada define, el buscador la lista. Normalmente, eso indica un error al escribir o un archivo que falta.

Descarga una página real por su dirección

A veces solo tienes la dirección web. En ese caso, escríbela, y este sitio descarga la página, sus hojas de estilo y sus propios scripts. Luego la revisión corre en tu navegador como siempre.

La descarga es cuidadosa. Sigue un nivel de @import, salta scripts de otros sitios y se detiene en un tamaño seguro. Así que un gestor de etiquetas o un chat no te hacen perder tiempo.

Este modo sirve para mirar rápido un sitio que no es tuyo. Sin embargo, para tu propio proyecto, pega o sube los archivos fuente. Así puedes añadir todas las plantillas a la vez.

Lo que el buscador no puede saber

Ninguna revisión estática lo ve todo. Por ejemplo, una clase creada con un valor del servidor, o el marcado que un script carga después, queda oculta. Por eso cada borrado trae una razón que puedes leer antes.

Así que trata el resultado como una revisión de código. Revisa la lista sin uso, añade a la lista segura lo que necesitas y prueba el archivo limpio en una copia de pruebas. Para una segunda opinión, el Coverage panel in Chrome DevTools muestra lo que usó una visita.