2012-02-26 10 views
8

Attualmente sto lavorando su un sito Web di 100.000 pagine, il design attuale è attivo da oltre 5 anni e gli aggiornamenti successivi hanno dato origine a oltre 12.000 file CSS di riga.Refactoring di file CSS grandi/vecchi

Ovviamente il CSS è diventato poco maneggevole, molti degli stili sono duplicati ed è quasi impossibile sapere quanti stili vengono effettivamente utilizzati.

Possiamo minificare, ma questo non sta davvero affrontando il problema, ritardando solo l'inevitabile ri-lavoro.

Quindi tre domande ci sono strumenti là fuori per ...

  • de-duplicazione di grandi file CSS?
  • scansione del sito e registrazione dell'uso di classi e ID CSS?
  • potrebbe essere possibile eseguire tale scansione con una scrittura di qualche tipo, forse Greasemonkey?
+1

Si potrebbe sicuramente scansionare il tuo sito con una sceneggiatura di qualche tipo. È possibile eseguire la scansione del codice HTML per determinare tutti gli ID e CLASS utilizzati, in modo da eliminare elementi non utilizzati dai file CSS. Si può sicuramente deduplicare il tuo CSS con poca programmazione. Ma questo è un sito grande, con file CSS di grandi dimensioni, e non c'è modo di allontanarsi dal fatto che sarà un grosso lavoro, anche con strumenti per semplificare alcuni processi. Buona fortuna con esso. :-) – Graham

+0

100000 pagine con CSS diversi o un file CSS per 100.000 pagine con lo stesso layout? L'approccio dipende in realtà da come sono strutturati i tuoi file. Vedi questa domanda correlata: http://stackoverflow.com/questions/6650146/css-find-unused-css –

+0

Come hai raggiunto 100.000 pagine? Anche i siti più complessi come Facebook utilizzano TOPS di 500 pagine. –

risposta

7

http://unused-css.com/ Fa alcuni di quello che chiedi, e hanno questo da dire: -

Latish Sehgal ha scritto un'applicazione di Windows per trovare e rimuovere classi CSS inutilizzati. Non l'ho provato ma dalla descrizione, devi fornire il percorso dei tuoi file html e un file CSS. Il programma elencherà quindi i selettori CSS inutilizzati. Dallo screenshot, sembra che non ci sia modo di esportare questo elenco o scaricare un nuovo file CSS pulito. Sembra anche che il servizio sia limitato a un file CSS. Se si dispone di più file che si desidera pulire, è necessario pulirli uno per uno.

Dust-Me Selectors è un'estensione per Firefox (per la versione 1.5 o successiva) che trova selettori CSS inutilizzati. Estrae tutti i selettori da tutti i fogli di stile sulla pagina che stai visualizzando, quindi analizza quella pagina per vedere quali di questi selettori non vengono utilizzati. I dati vengono quindi archiviati in modo che durante il test delle pagine successive, i selettori possano essere esclusi dalla lista man mano che vengono rilevati. Questo strumento dovrebbe essere in grado di spiderare un intero sito Web ma sfortunatamente potrei farlo funzionare. Inoltre, non credo che tu possa configurare e scaricare il file CSS con gli stili rimossi.

Liquidcity CSS cleaner è uno script php che utilizza espressioni regolari per controllare gli stili di una pagina. Vi dirà le classi che non sono disponibili nel codice HTML. Non ho provato questa soluzione.

Deadweight è uno strumento di copertura CSS. Dato un insieme di fogli di stile e un insieme di URL, determina quali selettori vengono effettivamente utilizzati e liste che possono essere cancellate "in sicurezza". Questo strumento è un modulo rubino e funzionerà solo con il sito web di rails. I selettori non utilizzati devono essere rimossi manualmente dal file CSS.

Helium CSS è uno strumento javascript per la ricerca di CSS inutilizzati su più pagine di un sito web. Devi prima installare il file javascript sulla pagina che vuoi testare. Quindi, è necessario chiamare una funzione elio per avviare la pulizia.

UnusedCSS.com è un'applicazione Web con un'interfaccia facile da usare. Digita l'url di un sito e otterrai un elenco di selettori CSS. Per ciascun selettore, un numero indica quante volte viene utilizzato un selettore. Questo servizio ha alcune limitazioni. L'istruzione @import non è supportata. Non è possibile configurare e scaricare il nuovo file CSS pulito.

CSSESS è un bookmarklet che consente di trovare selettori CSS inutilizzati su qualsiasi sito. Questo strumento è abbastanza facile da usare ma non ti permetterà di configurare e scaricare file CSS puliti. Elencherà solo i file CSS inutilizzati.

1

Se si utilizza Visual Studio, l'estensione this consente di unire automaticamente le classi CSS.

+0

Davvero? Ho pensato che solo i file .less usassero le regole di evidenziazione della sintassi CSS. –

+0

Lo sto usando per refactoring le mie classi css. È un ottimo strumento per me. –