style not excluir elemento definicion attribute css performance optimization code-cleanup

not - Cómo identificar definiciones de css no utilizadas



title html css (9)

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

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.

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

Se ve bien, pero necesitaría revisar minuciosamente su CSS "limpio" antes de subirlo a cualquiera de mis sitios.

También, como con todas estas herramientas , tendría que comprobar que no eliminó los ID y las clases sin estilo, sino que se utilizan como selectores de JavaScript.

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

Latish Sehgal ha escrito una aplicación de Windows para encontrar 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. En 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 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 CSS. Dado un conjunto de hojas de estilo y un conjunto de URL, determina qué selectores se utilizan realmente y listas que se pueden eliminar "de forma segura". 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, tienes que 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 le 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. Sólo listará los archivos CSS no utilizados.

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

Un mejor CSS Minifier 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 actualmente para quitarme el polvo, puede descartar los estilos que necesita.

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

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

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