Cómo identificar las definiciones de CSS no utilizadas

¿Hay algún buen enfoque para ayudar a identificar definiciones de CSS no utilizadas en un proyecto? Un montón de archivos CSS fueron sacados y ahora estoy tratando de arreglar 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 de Auditorías que puede mostrar los selectores de CSS no utilizados.

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

enter image description here

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

Se ve bien, pero tendría que comprobar minuciosamente su CSS “limpio” generado antes de subirlo a cualquiera de mis sitios.

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

El siguiente contenido está tomado de http://unused-css.com/, así que acéptelo para recomendar otras soluciones:

Latish Sehgal ha escrito una aplicación de Windows para encontrar y eliminar clases CSS sin usar. No lo he probado, pero a partir de la descripción, debe proporcionar la ruta de sus archivos html y un archivo CSS. El progtwig enumerará los selectores de 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 de CSS no utilizados. 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 utilizan. Luego, los datos se almacenan de modo que cuando se prueben 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 hacerlo funcionar. 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 conjunto 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. Te 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 realmente se utilizan y las listas que se pueden eliminar “de manera segura”. Esta herramienta es un módulo de 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 utilizados 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 de CSS. Para cada selector, un número indica cuántas veces se usa un selector. Este servicio tiene algunas limitaciones. La statement @import no es compatible. No puede configurar y descargar el nuevo archivo CSS limpio.

CSSESS es un bookmarklet que lo ayuda a encontrar selectores de 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 mostrará los archivos CSS no utilizados.

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

Un mejor minificador de CSS en C # descarga estilos redundantes;

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

Tenga en cuenta que, si hay algún contenido que no esté visible para quitarme el polvo, podría arrojar los estilos que necesita.

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

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

Uso de CSS

Extensión Firebug para ver qué reglas CSS se usan 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 no utilizadas. Identifica el CSS que usa y no usa. Le permite señalar qué partes innecesarias se pueden eliminar. Definitivamente debe usar este complemento para mantener sus archivos CSS lo más livianos posible.

Use la barra de herramientas del desarrollador de Internet Explorer , s Ver> Partidas 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.

Mira la velocidad de página de Google para Firefox . Hace esto, y una carga completa más.

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

Intereting Posts