Saltar al contenido

Buscador de selectores CSS no utilizados

Compara una hoja de estilos con una página HTML y enumera los selectores que no coinciden con nada.

Entrada
HTML

Buscador de selectores CSS no utilizados

Pega una hoja de estilos por un lado y el HTML que la usa por el otro, y esta herramienta enumera todos los selectores que no coinciden con ni un solo elemento en la página. Es una forma rápida de detectar reglas muertas dejadas atrás después de un rediseño, la eliminación de un componente, o meses de CSS copiado y pegado — el tipo de hinchazón que es tedioso buscar a simple vista en un archivo con cientos de reglas.

"Ignorar pseudo-clases y pseudo-elementos" compara una regla como .button:hover como simple .button, ya que una instantánea HTML estática no puede mostrar estado hover o focus; déjalo desactivado y la herramienta verifica los que puede hacer de forma segura — first-child, last-child, nth-child y not — contra la posición real de cada elemento. "Ignorar selectores que coincidan" toma una expresión regular, o un fragmento de texto plano como alternativa, para excluir clases que un script activa en tiempo de ejecución, como cualquier cosa que comience con js- o is-active, para que nunca se marquen como muertas. "Mostrar clases/IDs HTML sin regla CSS" invierte la comparación, útil para detectar errores tipográficos en nombres de clase. "Incluir selectores dentro de @media" verifica reglas de consulta de medios de la misma forma que el resto de la hoja, o las omite cuando está desactivado. Cambia la salida a "CSS limpio" para obtener la hoja de estilos sin ninguna regla no utilizada.

La comparación se ejecuta contra la estructura HTML tal como está escrita — el marcado inyectado por un script después de que se carga la página no está en la instantánea pegada, así que verifica antes de eliminar una regla. Los selectores combinados con comas se verifican individualmente, por lo que una regla que cubre dos clases al mismo tiempo solo se elimina una vez que ambas se confirman no utilizadas.

Todo sucede en tu navegador: el CSS e HTML que pegas nunca se carga a ningún lado. Copia el resultado, descárgalo como archivo .txt, o envíalo directamente de vuelta a la entrada para ejecutar otra pasada.

Preguntas frecuentes

¿Verifica selectores dentro de @media, @supports y @keyframes?
Los selectores dentro de @media se verifican como cualquier otra regla, con una opción para omitirlos si lo prefieres. Otras at-rules como @font-face y @keyframes no tienen selectores de elemento para comparar, por lo que se dejan sin cambios.
¿Puede detectar clases que JavaScript agrega o elimina?
No — la coincidencia se realiza contra el HTML que pegas, no contra una página con scripts activos. Usa la opción de patrón de ignorar para excluir clases que sabes que son activadas por JavaScript, como is-open o js-active, para que no se reporten como no utilizadas.
¿Qué sucede con combinadores como un selector hijo o hermano?
La herramienta sigue la cadena de selectores completa — descendiente, hijo, hermano adyacente y hermano general — contra la estructura del HTML pegado, no solo el nombre de la clase final.
¿Por qué aparece como no utilizado un selector que sé que se usa?
La mayoría de las veces el HTML que lo usa no fue pegado, o se agregó dinámicamente después de que la página se carga. Pega el marcado completo renderizado, o excluye el selector con la opción de patrón de ignorar si se aplica por un script.
¿Se cargan mi CSS o HTML en algún lado?
No. La comparación se ejecuta completamente en tu navegador — ni la hoja de estilos ni el marcado que pegas se dejan tu dispositivo.