Refactoring di file CSS grandi / vecchi


13

Attualmente sto lavorando su un sito Web di 100.000 pagine, il progetto attuale è in atto da oltre 5 anni e gli aggiornamenti successivi hanno portato a oltre 12.000 file CSS di linea.

Ovviamente il CSS è diventato ingombrante, molti degli stili sono duplicati ed è quasi impossibile sapere quanti degli stili vengano effettivamente utilizzati.

Possiamo minimizzare, ma questo non sta davvero affrontando il problema, solo ritardando l'inevitabile rilavorazione.

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

  • de-duplicazione di file CSS di grandi dimensioni?
  • scansione del sito e registrazione dell'uso della classe CSS e dell'ID?
  • una tale scansione potrebbe essere realizzata con una sceneggiatura di qualche tipo, forse con Greasemonkey?

Risposte:


17

http://unused-css.com/ Fa un po 'di quello che chiedi e hanno questo da dire: -

Latish Sehgal ha scritto un'applicazione Windows per trovare e rimuovere classi CSS inutilizzate. 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 non utilizzati. 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 hai più file che vuoi pulire, devi pulirli uno per uno.

Dust-Me Selectors è un'estensione di Firefox (per v1.5 o successive) 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 quei selettori non sono utilizzati. I dati vengono quindi archiviati in modo che durante il test delle pagine successive, i selettori possano essere cancellati dall'elenco quando vengono rilevati. Questo strumento dovrebbe essere in grado di eseguire lo spider di 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.

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

Deadweight è uno strumento di copertura CSS. Dato un set di fogli di stile e un set di URL, determina quali selettori sono effettivamente utilizzati e gli elenchi che possono essere "sicuri" eliminati. Questo strumento è un modulo ruby ​​e funziona solo con il sito Web di Rails. I selettori inutilizzati devono essere rimossi manualmente dal file CSS.

Helium CSS è uno strumento javascript per scoprire CSS inutilizzati su molte pagine di un sito web. Devi prima installare il file javascript nella pagina che vuoi testare. Quindi, è necessario chiamare una funzione di elio per iniziare 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 ti aiuta a trovare selettori CSS inutilizzati su qualsiasi sito. Questo strumento è abbastanza facile da usare ma non ti consente di configurare e scaricare file CSS puliti. Elenca solo i file CSS inutilizzati.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.