Come identificare le definizioni CSS inutilizzate


414

Esistono buoni approcci per aiutare a identificare le definizioni CSS inutilizzate in un progetto? Sono stati inseriti un sacco di file CSS e ora sto cercando di ripulire un po 'le cose.


Quando dici "in un progetto" - cosa intendi esattamente? A seconda dell'ambiente che stai utilizzando, la risposta potrebbe essere diversa.
Ian Robinson,


Ho realizzato uno strumento che fa un ottimo lavoro. Ecco la mia penna codice
toddmo,

Ho scritto una sceneggiatura che può farlo per te: github.com/kgoedecke/unused-css-parser
Kevin Goedecke

Risposte:


145

Dai un'occhiata all'estensione di Firefox Dust-Me su https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .


14
L'estensione non funziona in Firefox 4
mvark

5
Questo aggiornamento non è mai emerso e dopo aver chiesto nei forum SitePoint sembrerebbe che il plugin sia buono come morto.
Mike B,

3
Sembra che l'autore abbia pubblicato una versione aggiornata sul suo sito web di recente, anche una versione per Opera. Dai
Funka l'

2
Purtroppo non funziona più
Jonathan,

4
Ho scritto un sostituto, esegue la scansione di più pagine del tuo sito Web (seguendo i collegamenti in modo ricorsivo): jitbit.com/unusedcss
Alex

259

Chrome Developer Tools ha una scheda Audit che può mostrare selettori CSS inutilizzati.

Eseguire un controllo, quindi, in Prestazioni pagina Web, consultare Rimuovere le regole CSS inutilizzate

inserisci qui la descrizione dell'immagine


64
è fantastico, ma peccato che non sia possibile eseguirlo su un gruppo di pagine (altrimenti le regole CSS inutilizzate potrebbero essere inevitabili)
Damon

17
Eseguo lo strumento di controllo e mi mostra i CSS inutilizzati, ma come usarlo allora? Devo cercare manualmente ogni elemento e rimuoverlo?
Timothée HENRY,

19
È solo la pagina corrente. Dice "2445 regole (83%) di CSS non utilizzate dalla pagina corrente", quindi non molto utili.
chhantyal,

8
Quando si espande l'elemento, viene visualizzato un elenco di regole effettive non in uso. Tuttavia, non è utile sui siti in cui si modifica DOM al volo.
Howie,

10
In realtà questo è appena stato spostato nella copertura - vai ai controlli -> accanto alla Console in basso c'è un menu (menu tipo 3 punti verticali) e puoi selezionare la copertura lì. Basta fare clic su registra e navigare.
Graham Ritchie,

65

Ho appena trovato questo sito - http://unused-css.com/

Sembra buono ma avrei bisogno di controllare a fondo il suo CSS "pulito" emesso prima di caricarlo su uno dei miei siti.

Inoltre, come con tutti questi strumenti, avrei bisogno di verificare che non eliminasse gli ID e le classi senza stile ma che fossero usati come selettori JavaScript.

Il contenuto di seguito è tratto da http://unused-css.com/, quindi ringrazia loro per aver consigliato altre soluzioni:

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.

Topstyle è un'applicazione Windows che include una serie di strumenti per modificare i CSS. Non l'ho testato molto, ma sembra che abbia la possibilità di rimuovere selettori CSS inutilizzati. Questo software costa 80 USD.

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.


5
solo una nota che unused-css.com non ti consente di scaricare il CSS senza essere un membro a pagamento e il piano più basso inizia a $ 29 al mese! mi sembra un po 'caro per il servizio
georgiecasey

1
Aggiungerei purifycss github.com/purifycss/purifycss al mix. È gratuito, abbastanza popolare (secondo le stelle di Github) e funziona con app a pagina singola.
Dmitry Gonchar,

21

Google Page Speed può farlo per te (in realtà fa molto di più che dirti quale CSS non è in uso). Su FireFox, è disponibile come componente aggiuntivo FireBug. Quindi c'è anche una versione online.


8

Un migliore CSS Minifier in C # dump di stili ridondanti;

Ti piacerebbe anche usare Dust-Me con questo.

Tieni presente che se ci sono contenuti che al momento non sono visibili per rispolverarmi, potresti buttare fuori gli stili di cui hai bisogno.

EDIT: il collegamento è stato interrotto ma archive.org ha sia la pagina che il codice.


7

Utilizzo CSS

Estensione Firebug per visualizzare quali regole CSS sono effettivamente utilizzate.

L'utilizzo CSS è un'estensione per Firebug (quindi necessario per avere Firebug installato) che consente di conoscere le regole di stile CSS inutilizzate. Identifica il CSS che usi e non usi. Ti consente di indicare quali parti non necessarie possono essere rimosse. Dovresti assolutamente usare questo componente aggiuntivo per mantenere i tuoi file CSS il più leggeri possibile.


6

Sembra che qualcuno abbia aggiornato i Selettori DustMe per lavorare di nuovo con Firefox con un nuovo nome - "CSS Roundup" http://blog.brothersmorrison.com/?p=198


L'autore ha pubblicato una nuova versione solo poche settimane fa sul suo sito Web, all'indirizzo www.brothercake.com
Funka

questo plugin non è più disponibile e il link per il download è su Brothercake è morto
Andrea Mauro


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.