Cómo identificar definiciones css no utilizadas [cerrado]


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

Author: Somnath Muluk, 2008-09-26

9 answers

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

 140
Author: David Medinets,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-09 18:12:42

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

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

introduzca la descripción de la imagen aquí

 242
Author: Derek Adair,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-19 21:09:06

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

Se ve bien, pero tendría que comprobar a fondo su salida 'limpio' css antes de subirlo a cualquiera de mis sitios.

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

El siguiente contenido está tomado de http://unused-css.com / así que el crédito para ellos por recomendar otras soluciones:

Latish Sehgal ha escrito una aplicación de Windows para encontrar y eliminar clases CSS no utilizadas. No lo he probado, pero desde la descripción, tienes que proporcionar la ruta de tus archivos html y un archivo CSS. El programa listará los selectores CSS no utilizados. De 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 limpiar 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. Los datos se almacenan para que al probar páginas posteriores, los selectores se puedan tachar de la lista a medida que se encuentran. Esta herramienta se supone que es capaz de araña todo un sitio web, pero por desgracia 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 utiliza expresiones regulares para comprobar 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 CSS. Dado un conjunto de hojas de estilo y un conjunto de URLs, determina qué selectores se usan realmente y enumera cuáles 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 javascript para descubrir CSS no utilizado en muchos páginas en un sitio web. Primero tiene que instalar el archivo javascript en la página que desea probar. Entonces, usted tiene que llamar a una función del 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 utiliza un selector. Este servicio tiene algunas limitaciones. La instrucción @import no es compatible. No se puede configurar y descargar el nuevo limpiar archivo CSS.

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

 63
Author: megaSteve4,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-18 16:18:38

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

 21
Author: Salman A,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-05-17 10:28:47

Un Mejor minificador 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 es visible actualmente para dust-me, puede tirar los estilos que necesita.

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

 8
Author: mjc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-28 07:03:59

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

 7
Author: Josh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-10-21 16:36:53

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 usas y no usas. Le permite señalar qué partes innecesarias se pueden eliminar. Definitivamente debes usar este complemento para mantener tus archivos CSS lo más livianos posible.

 6
Author: Somnath Muluk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-10 10:26:49

Use Internet Explorer Developer Toolbar, s View > CSS Selector Matches: Ver un informe de todas las reglas de estilo establecidas y cuántas veces se utilizan en la página actual.

 3
Author: Jitendra Vyas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-01-22 19:23:01

Echa un vistazo a PageSpeed de Google para Firefox. Hace esto, y un montón más.

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

 3
Author: Drew Noakes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-27 17:49:24