¿Cómo puedo encontrar reglas CSS no utilizadas / no aplicadas en una hoja de estilo?

18

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,

css optimization liori
fuente
Podría aprovechar la falta de una herramienta adecuada como una oportunidad: dado que comprende lo que necesita, puede ser la mejor persona para crear dicha herramienta. Puede inspeccionar el código de las herramientas existentes para obtener ideas y técnicas, y luego construir algo que funcione a nivel de regla en lugar de selector. ¡Tu oportunidad de fama y fortuna! ... bueno, tal vez solo fama;)
iconoclasta
@Brandon: esta pregunta acaba de alcanzar la marca de "pregunta notable" ... así que puede que tengas razón :-)
liori

Respuestas:

8

Extensión Dust Me Selecters Firefox

En las Herramientas para desarrolladores de Chrome, puede usar la herramienta de rendimiento de la página web para buscar reglas CSS no utilizadas.

John Conde
fuente
¡Genial, lo comprobaré de inmediato!
liori
Estas herramientas solo pueden eliminar selectores inútiles. Aclaré mi pregunta.
liori
2
@liori: No creo que esto sea confiablemente posible. En su ejemplo de margen, la segunda regla de margen puede parecer superflua, pero tiene una especificidad más alta y podría anular una regla posterior. Por ejemplo, si una clase .abctiene un margen diferente, <a class="abc">creo que cambiaría su margen al pasar el mouse por encima. Ahora eso probablemente no sea lo que pretendes, pero ciertamente podría ser, y no puedes eliminar ciegamente esa regla duplicada.
DisgruntledGoat
@DisgruntledGoat: Estoy pensando en un caso de un mundo cerrado: si no se especifica, no existe. Entonces, si no hay definiciones para a.abc, o no hay <a class="abc"/> en ninguna parte del HTML, no existe. De todos modos, ya terminé la tarea que me llevó a hacer esta pregunta aquí, y terminé con la aplicación de muchas heurísticas. Probé las Herramientas para desarrolladores de Chrome, pero no me ayudaron mucho.
liori
5

También puede echar un vistazo a Unused-CSS.com. Esta herramienta explorará sus páginas y creará archivos CSS optimizados sin los selectores no utilizados.


fuente
4

Siempre me ha gustado el uso de CSS . Es un complemento para Firebug y le permite escanear la página y ver qué reglas CSS no se aplican. Incluso escaneará automáticamente y funcionará en varias páginas.

macca1
fuente
2

Marque uncss, es un módulo de nodo.

"UnCSS es una herramienta que elimina CSS no utilizado de sus hojas de estilo. Funciona en varios archivos y admite CSS inyectado con Javascript".

https://www.npmjs.com/package/uncss

Editar después del comentario:

Creo que estás pidiendo dos cosas diferentes:

  1. Elimine las reglas no utilizadas automáticamente, esto es lo que uncss puede hacer por usted. También hice esta herramienta, CSS byebye, pero no es automática como usted pregunta: https://www.npmjs.com/package/css-byebye

  2. Optimice la hoja de estilo donde las reglas pueden fusionarse / simplificarse.

En ese caso, recomendaría dos herramientas que hacen este tipo de cosas:

Hacen más o menos las mismas optimizaciones, a veces uno tiene mejores resultados que el otro, y a veces es lo contrario. Depende de tu hoja de estilo. (también puedes correr uno tras otro: P)

Los uso como parte de un proceso de construcción con gruñido. Entonces, no es realmente algo visual como lo preguntas, pero hacen el tipo de optimizaciones que deseas.

Esto es lo que dicen para CSSO (información completa aquí: https://en.bem.info/tools/optimizers/csso/ )

Optimizaciones estructurales:

  • Fusionar bloques con selectores idénticos
  • Fusionar bloques con propiedades idénticas
  • Eliminación de propiedades anuladas
  • Eliminación de propiedades de taquigrafía anuladas
  • Eliminación de selectores repetidos
  • Fusión parcial de bloques.
  • División parcial de bloques
  • Eliminación de conjunto de reglas vacío y at-rule
  • Minificación de las propiedades de margen y relleno.
Kev
fuente
A juzgar por la página principal, funciona en el nivel del selector. ¿Puede realmente eliminar las reglas en los dos casos de ejemplo que mencioné en la pregunta?
liori
He editado mi respuesta. Probé su primer ejemplo con la interfaz web de CSSO: resultado: body {color: #fff; padding: 10em} h1, p, ul {color: # 000}
Kev
1

@ John: excelente herramienta, gracias por el enlace

@liori: También recomendaría encarecidamente el complemento Firefox Web Developer que le permite mostrar los nombres / propiedades de los elementos, editar el CSS en tiempo real (no escribe en su archivo CSS) para que pueda editar y probar los cambios CSS sin el faff de tener que guardar y cargar su CSS cada 3 segundos. + carga más funciones.

También hay un inspector DOM muy agradable que se conecta a Firebug que también se conecta y es ideal para resolver Javascript.

Esencia digital
fuente