2012-02-26 188 views
8

Actualmente estoy trabajando en un sitio web de 100.000 páginas, el diseño actual ha estado en funcionamiento durante más de 5 años y las sucesivas actualizaciones han dado como resultado cuatro más de 12,000 archivos de línea CSS.Refactorización de archivos CSS grandes/viejos

Obviamente, el CSS se ha vuelto poco manejable, muchos de los estilos están duplicados y es casi imposible saber cuántos de los estilos están siendo utilizados en realidad.

Podemos minimizar, pero esto realmente no está solucionando el problema, simplemente retrasando la inevitable repetición del trabajo.

Así tres preguntas ¿hay herramientas que hay para ...

  • de-duplicación de grandes archivos CSS?
  • escaneando el sitio y registrando la clase de CSS y el uso de ID?
  • ¿podría tal escaneo se logra con un script de algún tipo, tal vez Greasemonkey?
+1

Definitivamente puede escanear su sitio con un script de algún tipo. Podrías escanear tu HTML para determinar cada ID y CLASE que se usa, para que puedas eliminar material no utilizado de tus archivos CSS. Definitivamente podría deduplicar su CSS sin mucha programación. Pero este es un sitio grande, con grandes archivos CSS, y no hay forma de evitar el hecho de que será un gran trabajo, incluso con herramientas para simplificar algunos de los procesos. Suerte con ello. :-) – Graham

+0

100000 páginas con diferentes CSS, o un archivo CSS de 100.000 páginas con el mismo diseño? El enfoque realmente depende de cómo estén estructurados sus archivos. Consulte esta pregunta relacionada: http://stackoverflow.com/questions/6650146/css-find-unused-css –

+0

¿Cómo llegó a 100.000 páginas? Incluso los sitios más complejos como Facebook usan TOPS de 500 páginas. –

Respuesta

7

http://unused-css.com/ ¿Tiene algo de lo que pide, y tienen esto que decir: -

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 programa 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 los 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.

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 declaración @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.

1

Si está usando Visual Studio, la extensión this ayuda a fusionar automáticamente las clases de CSS.

+0

¿De verdad? Creí que los archivos .less usaban reglas de resaltado de sintaxis CSS. –

+0

Lo estoy usando para refactorizar mis clases de CSS. Es una gran herramienta para mí. –