Refactorización de archivos CSS grandes / antiguos


13

Actualmente estoy trabajando en un sitio web de 100,000 páginas, el diseño actual ha estado en vigor durante más de 5 años y las actualizaciones sucesivas han dado como resultado cuatro archivos CSS de más de 12,000 líneas.

Obviamente, el CSS se ha vuelto difícil de manejar, muchos de los estilos están duplicados y es casi imposible saber cuántos de los estilos se están utilizando realmente.

Podemos minimizar, pero esto no está realmente abordando el problema, solo retrasando la inevitable reelaboración.

Entonces, hay tres preguntas sobre herramientas para ...

  • ¿Desduplicar archivos CSS grandes?
  • escaneando el sitio y registrando la clase CSS y el uso de ID?
  • ¿podría lograrse tal escaneo con un script de algún tipo, greasemonkey tal vez?

Respuestas:


17

http://unused-css.com/ Hace algo de lo que pides, y tienen esto que decir:

Latish Sehgal ha escrito una aplicación de Windows para buscar y eliminar clases CSS no utilizadas. No lo he probado, pero a partir de la descripción, debe proporcionar la ruta de sus archivos html y un archivo CSS. Luego, el programa enumerará los selectores 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 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. Luego, los datos se almacenan de modo que al probar páginas posteriores, los selectores se pueden tachar de la lista a medida que se encuentran. Se supone que esta herramienta es capaz de arañar un sitio web completo, 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. Le indicará 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 usan realmente y enumera los que 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 de 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, 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 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 marcador que lo ayuda a encontrar selectores 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 enumerará los archivos CSS no utilizados.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.