Pregunta

Tenemos varios archivos masivos CSS que siguió creciendo en los últimos años cada vez que se añadieron nuevos elementos a nuestro sistema, así como las páginas JSP (que incluyen además otras páginas JSP, etc.) que hacen referencia a estos archivos.

Sabemos que tenemos muchas reglas que ya no se usan y muchos que son redundantes.

Las nuevas herramientas a seguir viniendo a cabo. ¿Existe una herramienta que (además de los obvios tales como Aptana y del W3C validador CSS) que pueden analizar un directorio y la ayuda en la limpieza y la optimización de las reglas CSS?

¿Fue útil?

Solución

Es una tarea difícil ... especialmente si se genera el contenido HTML DOM sobre la marcha de ninguna manera.

El plug-in de Polvo-Me-selectores es útil, pero sobre una base de página por página, un montón de selectores vaya a utilizarla ... pero no CNE sea válido.

Hay algunos trucos que he utilizado para ayudar a limpiar.

Uno a uno, insertar algún estilo HORRID que usted será capaz de detectar inmediatamente para determinar si se está utilizando un selector. por ejemplo.

border:6px dashed #ffaacc;
padding:12px;

Cualquier cosa que hace con una enorme frontera rosada caliente discontinua ahora ... es un selector de "activo". Si se puede navegar por la mayor parte de su sitio / aplicación sin verlo, entonces es probable "muerto".

(si el código CSS se "genera" puede optimizar esto para probar con varios colores a la vez, y el uso de contenido generado por anteponer el "id" del selector)

Otra opción si utiliza un sistema CSS generado ... es añadir una propiedad final a su selector que conjuntos dicen ... una imagen de fondo con una URL generada. por ejemplo.

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

A continuación, sólo tiene que navegar por su sitio / aplicación durante un tiempo y luego comprobar su registro de la tela de peticiones HTTP de imagen ... para cualquier URL de la imagen generada que no se solicita en el registro ... usted probablemente ha encontrado un "muerto "selector.

Otros consejos

Hay plug-in Dust-Me-selectores para Firefox, aunque se ve a través de una página representada en el navegador, por supuesto, no a través de un directorio.

selenio permite automatizar las pruebas de página y seleccionar los elementos a través de los selectores CSS. Si se acumulan los partidos en todo el sitio que sería capaz de identificar elementos no coincidentes.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top