¿Hay alguna forma de encontrar CSS sin usar en un sitio web?

Question

¿Hay alguna forma de encontrar CSS sin usar en un sitio web?

Estoy tratando de limpiar un proyecto que acabo de heredar.

Answer 1

Dust-me Selectors es un complemento de Firefox que encuentra los selectores no utilizados.

Answer 2

Me acabo de encontrar con esto y se acordó de su pregunta: http://github.com/geuis/helium-css

Answer 3

Hay mucho que se puede decir acerca de los métodos de mejores prácticas para CSS. Intentaré atenerme a los puntos principales.

Use un restablecimiento de CSS.

Trate de eliminar declaraciones CSS realmente generales como h1 {} y #container em {}. Es mucho mejor que utilices h1.section-title y #container em.important {}, porque de esa manera si eliges usar h1 o em de una manera diferente en algún lugar de tu documento, no tienes que preocuparte por anular ningún código existente.

No sea demasiado específico en sus selectores de CSS si no es necesario. Realmente solo necesita tener altos grados de especificidad si estar en una sección específica cambia la forma en que se mostrará el elemento. De lo contrario, para hacer que su código para su clase block sea reutilizable, #container .content .block ... podría reducirse a .block ... en muchos casos.

Busque puntos en común en su CSS y vea si puede crear clases reutilizables. Si tiene bloques similares class="favorites" y class="popular", conviértalo en class="block block-favorites" y class="block block-popular", y ponga los elementos comunes en .block.

Adquiera el hábito de hacer que las áreas en su CSS tengan un ancho automático (se puede hacer implícitamente) para que crezcan al ancho de sus contenedores. Esto hace que sea increíblemente más fácil mover secciones de una parte estrecha de su sitio web a una gran parte de su sitio web sin tener que cambiar ningún código.

Comentar su código y dividirlo en secciones generalmente ayuda a que el código sea más legible.

Se sorprenderá de cuánto más limpio se ve su código cuando implementa selectores de CSS más potentes. La mayoría de ellos son compatibles con varios navegadores (Internet   Explorer 7 y versiones posteriores).
Algunos recursos valiosos: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

respuesta movieron desde:
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

Chrome 59 ha incorporado en la pantalla de cobertura para CSS y JavaScript desde 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

Puede habilitarlo abriendo las herramientas de desarrollo, luego el comando me nu (Cmd+Shift+P en Mac o Ctrl+Shift+P en Windows y Linux), y luego escriba "mostrar cobertura".