selectors - limpiar estilos css no utilizados

¿Cómo puedo limpiar efectivamente los estilos en un sitio web grande? (5)

Además, hay muchos sitios que los buscarán por ti. Como este: http://unused-css.com/ No sé cómo se comparan con los selectores de Dust-Me, pero sé que los selectores de Dust-Me no son compatibles con Firefox 8.0.

Nuestro sitio web ha estado en constante desarrollo durante la mayor parte de los últimos cinco años. Da la casualidad de que casi todos los estilos del sitio están en un gran archivo CSS. Con el tiempo, este archivo css ha crecido a aproximadamente 9,000 líneas, y estoy seguro de que algunos de esos estilos ya no se utilizan y algunos estilos ofrecen funcionalidad duplicada.

El sitio está escrito con PHP / Smarty; hay más de 300 plantillas inteligentes y todo el sitio contiene más de 1000 páginas diferentes (URL de lectura únicas). Estoy seguro de que seguirá creciendo, al igual que el archivo CSS.

¿Cuál es la mejor manera de limpiar este archivo?

Actualización : desafortunadamente, los analizadores en línea donde coloco una URL no me funcionarán, ya que el 75% del sitio está detrás de los nombres de usuario / contraseñas y, dependiendo del inicio de sesión, hay media docena de roles diferentes, cada uno de los cuales tiene su Conjunto propio de páginas. También hay elementos transaccionales (tienda en línea), donde las páginas se muestran después de que (por ejemplo) el pago con tarjeta de crédito sea tomado / procesado. Dudo que cualquier herramienta en línea pueda manejar cualquiera de estos. Por lo tanto, si hay una herramienta, tendría que trabajar en un árbol de origen.

Aparte de revisar cada archivo .tpl y buscar los selectores manualmente, no veo otra forma.

Por supuesto, podría usar los selectores Dust-Me , pero aún tendría que pasar por cada página que usa los archivos .tpl (no cada URL, ya que sé que muchos de ellos serán duplicados).

¡Suena como un gran trabajo! Tuve que hacerlo una vez antes e hice exactamente eso, me tomó una semana.

Otra herramienta es un complemento de Firebug llamado CSS Usage . Hasta donde leo, puede funcionar en varias páginas, pero podría romperse si se usa en todo el sitio. Darle una oportunidad.

¡Triunfo! Echa un vistazo a la herramienta en línea CSS no utilizado . Escriba su url de índice en el campo y listo, unos minutos más tarde, una lista de todos los selectores usados :) Sé que desea los no utilizados, pero el único trabajo es encontrar los no utilizados en el archivo (ctrl + f) y quitándolos :)

Asegúrese de utilizar la segunda opción, le enviarán por correo electrónico los resultados del rastreo de toda su página web. Puede tardar hasta media hora, pero eso es mucho mejor que una semana. Tomar un cafe :)

Acabo de probarlo, funciona de maravilla :)

Podría usar el complemento Dust-Me Selectors para FireFox para encontrar estilos no utilizados:

http://www.sitepoint.com/dustmeselectors/

Si tiene un mapa del sitio, puede usarlo para permitir que el complemento rastree su sitio:

El diálogo de la araña tiene todos los controles para realizar una operación de araña en todo el sitio. Ingrese la URL de un archivo XML de Sitemap o un sitemap HTML, y el programa leerá ese archivo y extraerá todos sus enlaces. A continuación, cargará cada una de esas páginas y realizará una operación de búsqueda acumulativa en cada una.

Tuve que hacer esto hace unos 3 años en una aplicación web ASP clásica bastante grande.

Tomé el enfoque de que solo hay un número finito de elementos de estilo en cada página y comencé identificándolos. Por ejemplo, revisé las páginas principales e identifiqué que la mayoría de las etiquetas estaban en negrita y azul oscuro y que todos los botones tienen el mismo ancho (por ejemplo).

Una vez que lo hice, hablé con el equipo y decidimos que todo lo que no se ajustara a estas reglas debería identificarme, por lo que escribí una hoja de estilo basada en esta suposición.

Terminamos con unos 30 estilos para aplicar a varios cientos de páginas. Más tarde, varios expresiones de búsqueda-y-reemplaza regulares (tuvimos la suerte de que el desarrollo original había usado un HTML razonablemente bien estructurado) teníamos algo utilizable que solo necesitaba algunos ajustes extraños.

Los puntos clave son:

Apunta a la uniformidad en todo el sitio . En otras palabras, no asuma que el sitio resultante se verá exactamente igual que el original, sino que intente que se vea igual a sí mismo (uniforme) de página a página
Enfréntate primero a los estilos obvios (etiquetas / botones / fuentes de párrafo / encabezados) y luego preocupate por los estilos más pequeños o los estilos únicos más tarde

También puede encontrar que mantener los estilos únicos (por ejemplo, una página del panel de control que tiene elementos únicos que no aparecen en otra parte) en archivos separados para mantener el tamaño del archivo hacia abajo. Obviamente, depende de su sitio si esto ayudaría.

Veo que no hay una buena respuesta todavía. He probado la "herramienta en línea de CSS no utilizada" y parece funcionar bien para sitios públicos. El problema es si tiene un CSS para mostrar su sitio web público + una intranet (por ejemplo: wordpress site + login para usuarios registrados). Las páginas de la intranet no serán rastreadas y perderá sus estilos CSS.

Mi próximo intento será usar gulp + uncss: https://github.com/ben-eb/gulp-uncss

Debe definir todas las direcciones URL de su sitio (externa e interna) y (quizás; no estoy seguro) si está ejecutando el sitio con una contraseña de usuario en su navegador, gulp + uncss puede ir dentro de la URL interna.

Actualización: veo que la herramienta en línea no utilizada-css tiene una solución de inicio de sesión.