Cómo identificar definiciones CSS no utilizadas


414

¿Hay algún buen enfoque para ayudar a identificar definiciones CSS no utilizadas en un proyecto? Se introdujeron un montón de archivos CSS y ahora estoy tratando de limpiar un poco las cosas.


Cuando dices "en un proyecto", ¿qué quieres decir exactamente? Dependiendo de qué entorno esté utilizando, la respuesta podría ser diferente.
Ian Robinson


Hice una herramienta que hace un buen trabajo. Aquí está mi código Pen
toddmo

Escribí un script que puede hacer eso por ti: github.com/kgoedecke/unused-css-parser
Kevin Goedecke

Respuestas:


145

Eche un vistazo a la extensión de Firefox Dust-Me en https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .


14
La extensión no funciona en Firefox 4
mvark

55
Esta actualización nunca ha aparecido y después de preguntar en los foros de SitePoint parece que el complemento es tan bueno como muerto.
Mike B

3
Parece que el autor ha publicado una versión actualizada en su propio sitio web muy recientemente, incluso una versión para Opera. Echa un vistazo a brothercake.com
Funka

2
Desafortunadamente ya no funciona
Jonathan

44
Escribí un reemplazo, rastrea varias páginas en su sitio web (siguiendo los enlaces de forma recursiva): jitbit.com/unusedcss
Alex

259

Chrome Developer Tools tiene una pestaña Auditorías que puede mostrar selectores CSS no utilizados.

Ejecute una auditoría, luego, en Rendimiento de la página web, vea Eliminar reglas CSS no utilizadas

ingrese la descripción de la imagen aquí


64
eso es increíble, pero lástima que no puedas ejecutarlo en un grupo de páginas (de lo contrario, las reglas CSS no utilizadas podrían ser inevitables)
Damon

17
Ejecuto la herramienta de auditoría y me muestra el css no utilizado, pero ¿cómo usarlo entonces? ¿Tengo que buscar manualmente cada elemento y eliminarlo?
Timothée HENRY

19
Es solo la página actual. Dice '2445 reglas (83%) de CSS no utilizadas por la página actual', por lo que no es realmente útil.
chhantyal

8
Cuando expande el elemento, obtiene una lista de reglas reales que no están en uso. Sin embargo, no es útil en sitios donde cambias DOM sobre la marcha.
Howie

10
En realidad, esto se acaba de trasladar a cobertura - vaya a auditorías -> al lado de la consola en la parte inferior hay un menú (menú de tipo de 3 puntos verticales) y puede seleccionar la cobertura allí. Simplemente haga clic en grabar y navegue.
Graham Ritchie

65

Acabo de encontrar este sitio: http://unused-css.com/

Se ve bien, pero necesitaría verificar minuciosamente su CSS 'limpio' generado antes de cargarlo en cualquiera de mis sitios.

Además, como con todas estas herramientas , necesitaría verificar que no eliminó las identificaciones y las clases sin estilo, sino que se usan como selectores de JavaScript.

El contenido a continuación está tomado de http://unused-css.com/, así que les agradecemos por recomendar otras soluciones:

Latish Sehgal ha escrito una aplicación de Windows para buscar y eliminar clases CSS no utilizadas. No lo he probado, pero a partir de la descripción, debe proporcionar la ruta de sus archivos html y un archivo CSS. Luego, el programa enumerará los selectores CSS no utilizados. De la captura de pantalla, parece que no hay forma de exportar esta lista o descargar un nuevo archivo CSS limpio. También parece que el servicio está limitado a un archivo CSS. Si tiene varios archivos que desea limpiar, debe limpiarlos uno por uno.

Dust-Me Selectors es una extensión de Firefox (para v1.5 o posterior) que encuentra selectores CSS no utilizados. Extrae todos los selectores de todas las hojas de estilo de la página que está viendo, luego analiza esa página para ver cuáles de esos selectores no se utilizan. Luego, los datos se almacenan de modo que al probar páginas posteriores, los selectores se pueden tachar de la lista a medida que se encuentran. Se supone que esta herramienta es capaz de arañar todo un sitio web, pero desafortunadamente podría hacer que funcione. Además, no creo que pueda configurar y descargar el archivo CSS con los estilos eliminados.

Topstyle es una aplicación de Windows que incluye un montón de herramientas para editar CSS. No lo he probado mucho, pero parece que tiene la capacidad de eliminar selectores CSS no utilizados. Este software cuesta 80 USD.

Liquidcity CSS Cleaner es un script php que usa expresiones regulares para verificar los estilos de una página. Le indicará las clases que no están disponibles en el código HTML. No he probado esta solución.

Deadweight es una herramienta de cobertura CSS. Dado un conjunto de hojas de estilo y un conjunto de URL, determina qué selectores se utilizan realmente y enumera los que se pueden eliminar de forma "segura". Esta herramienta es un módulo ruby ​​y solo funcionará con el sitio web de rails. Los selectores no utilizados deben eliminarse manualmente del archivo CSS.

Helium CSS es una herramienta de JavaScript para descubrir CSS no utilizado en muchas páginas de un sitio web. Primero debe instalar el archivo javascript en la página que desea probar. Luego, debe llamar a una función de helio para comenzar la limpieza.

UnusedCSS.com es una aplicación web con una interfaz fácil de usar. Escriba la url de un sitio y obtendrá una lista de selectores CSS. Para cada selector, un número indica cuántas veces se usa un selector. Este servicio tiene algunas limitaciones. La declaración @import no es compatible. No puede configurar y descargar el nuevo archivo CSS limpio.

CSSESS es un marcador que lo ayuda a encontrar selectores CSS no utilizados en cualquier sitio. Esta herramienta es bastante fácil de usar, pero no le permitirá configurar y descargar archivos CSS limpios. Solo enumerará los archivos CSS no utilizados.


55
solo una nota de que unused-css.com no te permite descargar el CSS sin que seas un miembro pago y el plan más bajo comienza en $ 29 al mes. me parece un poco caro para el servicio
georgiecasey

1
Agregaría purifycss github.com/purifycss/purifycss a la mezcla. Es gratis, bastante popular (según las estrellas en github) y funciona con aplicaciones de una sola página.
Dmitry Gonchar

21

Google Page Speed puede hacer eso por usted (en realidad hace mucho más que simplemente decirle qué CSS no se usa). En Firefox, está disponible como complemento de FireBug. Luego hay una versión en línea también.


8

Un mejor CSS Minifier en C # volca estilos redundantes;

También querrás usar Dust-Me con esto.

Tenga en cuenta que si hay algún contenido que actualmente no sea visible para dust-me, podría tirar los estilos que necesita.

EDITAR: el enlace se rompió pero archive.org tiene tanto la página como el código.


7

Uso de CSS

Extensión Firebug para ver qué reglas CSS se usan realmente.

CSS Usage es una extensión para Firebug (por lo tanto, es necesario tener Firebug instalado) que le permite conocer las reglas de estilo CSS no utilizadas. Identifica el CSS que usa y no usa. Le permite señalar qué partes innecesarias se pueden quitar. Definitivamente deberías usar este complemento para mantener tus archivos CSS lo más livianos posible.


6

Parece que alguien actualizó DustMe Selectors para trabajar con Firefox nuevamente con un nuevo nombre: 'CSS Roundup' http://blog.brothersmorrison.com/?p=198


El autor tiene una nueva versión publicada hace solo unas semanas en su sitio web, en www.brothercake.com
Funka

este complemento ya no está disponible y el enlace para descargar está en brothercake está muerto
Andrea Mauro


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.