Tengo un gran archivo CSS y un archivo HTML. Me gustaría saber qué reglas no se utilizan al mostrar un archivo HTML. ¿Hay herramientas para esto?
El archivo CSS ha evolucionado durante algunos años y, por lo que sé, nadie ha eliminado nada de él: la gente simplemente escribió nuevas reglas primordiales una y otra vez.
EDITAR: Se sugirió utilizar los selectores Dust-Me o la herramienta de rendimiento de la página web de Chrome. Pero ambos trabajan en el nivel de selectores, y no en reglas individuales. Tengo muchos casos en los que una regla dentro de un selector siempre se anula, y esto es de lo que principalmente quiero deshacerme. Por ejemplo:
body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }Todo el texto en mi HTML está dentro de algún elemento contenedor, por lo que nunca es blanco. bodyEl relleno siempre funciona, por lo que, por supuesto, bodyno se puede eliminar todo el selector. Y me gustaría deshacerme de esas reglas inútiles también.
EDITAR: Y otro caso de regla inútil: cuando duplica una existente sin cambiar nada:
a { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }Me gustaría deshacerme de la segunda margin-left... otra vez me parece que esas herramientas no encuentran esas cosas.
EDITAR: Agradezco todas las respuestas, pero lamentablemente las herramientas que sugirió no hicieron sugerencias útiles. Voté sus respuestas, pero esperaré una herramienta que haga las cosas de manera más granular, como se especificó anteriormente.
Gracias,