2010-11-03 14 views
7

He heredado una hoja de estilo masiva con muchos miles de selectores y estoy seguro de que un buen número de ellos son innecesarios y nunca coinciden con los elementos en el sitio. En aras de la optimización, me gustaría eliminar esos selectores/reglas huérfanas.Cómo optimizo mi hoja de estilos eliminando selectores de CSS no coincidentes o innecesarios

¿Hay alguna herramienta que me permita comparar el CSS con la totalidad del sitio para identificar qué selectores son necesarios y cuáles no?

El sitio cuenta con componentes AJAX, por lo que escribir un guión rizo/wget para recorrer el sitio y luego recorrer cada selector y grep para un partido no es particularmente factible o bien (a pesar de que eso sería un poco divertido ...)

Todas las sugerencias fueron bienvenidas.

Gracias, JD

+0

yo recomendaría el uso de un "compilador CSS" como SASS o menos, o lo que sea. Si bien estos no se "optimizan", creo que la estructura de árbol que permiten a menudo me permite * escribir mejor selectores de CSS *, ya que ayudan a organizar y dividir el CSS en mejores unidades lógicas. –

+0

gracias @pst, lo comprobaré. probablemente no ayude en el caso de heredar CSS heredado, ¿verdad? A menudo –

+0

Prefiero pasar un par de horas (o días) para conseguir una base de código utilizable que slogging meses a través de él se confunde :-) SASS [en modo SCSS] y menos aceptar tanto la gramática CSS válido por lo que puede cambiar el CSS de forma incremental. –

Respuesta

2

Hay un complemento de Firefox llamado "Dust-Me Selectors".

https://addons.mozilla.org/en-US/firefox/addon/5392/

"Extrae todos los selectores de todas las hojas de estilo en la página que estás viendo, a continuación, analiza esa página para ver cuál de los selectores no se utilizan. Continuación, se almacena los datos para que cuando las pruebas páginas posteriores, los selectores se pueden tachar de la lista a medida que se encuentran ".

Es un proceso bastante manual pero podría ser lo que estás buscando.

+0

suena prometedor, lo comprobaré. Gracias. –

+0

parece un poco problemático pero la mejor opción disponible. Gracias. –

1

Puede probar uno de los muchos optimizadores de línea, como éste:

http://www.cleancss.com/

El Robson Compresor aparentemente hace el mejor trabajo de la combinación y la eliminación de los selectores redundantes.

http://iceyboard.no-ip.org/projects/css_compressor

Varios de los optimizadores de línea tienen la capacidad de eliminar los selectores no utilizados.

+0

Gracias @robert, parece que eliminará los selectores que son redundantes porque otro selector en la hoja de estilos ya coincide con ese elemento, pero quiero que compare mi hoja de estilos con el HTML representado (X) y decirme qué selectores no tienen coincidencia en el HTML ... –

0

Cobertura de verificación CSS (una extensión para Firebug) http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/

En mi opinión mejor que el polvo-me selectcor

+0

No veo una extensión en ese enlace, ¿me falta algo? –

+0

está en algún lugar de ese artículo pero aquí el enlace para usted https://addons.mozilla.org/en-US/firefox/addon/10704/ recuerde, es una extensión para firebug así que por favor instale el firebug si lo usa No lo tengo –

+0

Hola, ¿funcionó para ti? –

Cuestiones relacionadas