¿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.

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

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

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.

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.

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.

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.

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

Utilice la barra de herramientas de desarrollador de Internet Explorer , 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.

Echa un vistazo a PageSpeed ​​de Google para Firefox . Hace esto, y toda una carga más.

Aparentemente, también se está desarrollando un complemento de Chrome.