Cómo identificar definiciones de css no utilizadas [cerrado]

Question

¿Existen buenos enfoques para ayudar a identificar definiciones de css no utilizadas en un proyecto? Un montón de archivos css fueron introducidos y ahora estoy tratando de limpiar un poco las cosas.

Answer 1

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

Answer 2

Herramientas para desarrolladores de Chrome tiene una pestaña Auditorías que Puede mostrar selectores de CSS no utilizados.

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

Answer 3

Acabo de encontrar este sitio & # 8211; http://unused-css.com/

Se ve bien, pero necesitaría revisar minuciosamente su css 'limpio' que se muestra antes de subirlo a cualquiera de mis sitios.

Al igual que con todas estas herramientas, tendría que comprobar que no eliminó las ID ni las clases sin estilo, sino que se utilizan como selectores de JavaScript.

El contenido a continuación se toma de http://unused-css.com/ , por lo que les damos las gracias por recomendando otras soluciones:

  

Lath Sehgal ha escrito una aplicación de Windows para buscar y eliminar clases de CSS no utilizadas. No lo he probado, pero a partir de la descripción, debe proporcionar la ruta de acceso de sus archivos html y un archivo CSS. El programa mostrará una lista de los selectores de CSS no utilizados. Desde la captura de pantalla, parece que no hay manera 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 sin usar Selectores de CSS Extrae todos los selectores de todas las hojas de estilo en la página que está viendo, luego analiza esa página para ver cuáles de esos selectores no se usan. Luego, los datos se almacenan para que al probar las páginas subsiguientes, los selectores se puedan tachar de la lista a medida que se encuentren. Se supone que esta herramienta puede 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 los selectores de 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 dirá las clases que no están disponibles en el código HTML. No he probado esta solución.

     

Deadweight es una herramienta de cobertura de CSS. Dado un conjunto de hojas de estilo y un conjunto de URL, determina qué selectores se utilizan realmente y listas que pueden ser " de forma segura " eliminado Esta herramienta es un módulo de rubí y solo funcionará con el sitio web de rieles. Los selectores no utilizados deben eliminarse manualmente del archivo CSS.

     

Helium CSS es una herramienta 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 iniciar 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 de 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 puedes configurar y descargar el nuevo archivo CSS limpio.

     

CSSESS es un bookmarklet que te ayuda a encontrar selectores de CSS no utilizados en cualquier sitio. Esta herramienta es bastante fácil de usar, pero no te permitirá configurar y descargar archivos CSS limpios. Solo listará los archivos CSS que no se utilicen.

Answer 4

Velocidad de la página de Google puede hacerlo por usted (en realidad lo hace mucho más que solo decirte qué CSS no se usa). En FireFox, está disponible como complemento de FireBug. Luego hay una versión en línea también.

Answer 5

Un Mejor Minificador de CSS en C # vuelca estilos redundantes;

También querrías usar Dust-Me con esto.

Tenga en cuenta que, si hay algún contenido que no esté visible en la actualidad para desempolvarme, es posible que deseche los estilos que necesita.

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

Answer 6

Uso de CSS

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

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

Answer 7

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

Answer 8

Use Internet Explorer Developer Toolbar , s Ver > Coincidencias de selector de CSS : vea un informe de todas las reglas de estilo establecidas y cuántas veces se usan en la página actual.

Answer 9

Consulte PageSpeed ??de Google para Firefox . Hace esto, y toda una carga más.

Aparentemente, un complemento de Chrome también está en desarrollo.