2012-05-24 4 views
19

Probabilmente qualsiasi sviluppatore web esperto dovrebbe avere familiarità con questo problema: col tempo i file css possono diventare abbastanza grandi e brutti a causa di tutti i selettori non più usati, il che potrebbe essere piuttosto difficile da trovare. Sto lavorando a un progetto di rotaie in cui tendiamo a riprogettare le cose abbastanza frequentemente, il che porta a una tonnellata di css deadweight. Qual è il modo migliore per trovarlo e rimuoverlo?css inutilizzato: come si pulisce?

Ora, so che esiste un plugin per rotaie chiamato deadweight realizzato appositamente per questo scopo. Tuttavia, ecco il mio problema con deadweight: prima di tutto, ignora completamente i selettori utilizzati in javascript. Successivamente, esegue la scansione solo delle pagine che viene configurata per la scansione, il che significa che c'è il rischio di rimuovere qualcosa che viene utilizzato su pagine che non è stato digitalizzato per qualche motivo. Infine, trova selettori inutilizzati solo in css compilato (usiamo LESS) - associare questi elementi al codice reale è un po 'troppo complicato.

Ho anche provato http://unused-css.com/ - sono fantastici, ma non possono accedere a localhost e, di nuovo, possono solo eseguire la scansione CSS compilato.

Credo davvero che ci sia un modo migliore per farlo. In realtà, qualche tempo fa ho deciso di ottimizzare un particolare file css estraendo ogni selettore nell'intera directory del progetto (la modalità emacs + rinari lo rende super-facile e super-veloce), e ogni volta non ho visto alcun html o css nei risultati ho rimosso lo stile. Zero problemi, ha funzionato come un fascino. Ovviamente, non lo farò per l'intero sito. Tuttavia, non credo proprio che questo non possa essere automatizzato. Ora, prima che io accenda il mio pitone e lo compili, qualcuno può dirmi se reinventerò la ruota?

+1

Lo hai mai codificato? Sto cercando qualcosa di simile. – Barney

+0

Non so se mi manca qualcosa, ma non importa se analizza CSS compilato, un selettore inutilizzato è un selettore inutilizzato, sia MENO o semplice CSS. –

+0

è passato un po 'di tempo ... Abbiamo finito per cambiare lavoro, mi sono trasferito su una piattaforma diversa e, per una serie di motivi, non ho più avuto a che fare con questo problema da allora. Quindi non sono mai riuscito a scrivere la sceneggiatura :(scusate ragazzi –

risposta

12

Verificare uCSS library dal software Opera.

Ti aiuta a trovare CSS non utilizzati, oltre a duplicare CSS. Inoltre, puoi avere una panoramica di quante volte ogni regola è stata utilizzata nel tuo markup. Sono disponibili diverse opzioni impostando un file di configurazione.

Aggiornamento:

Un altro grande alternativa: csscss.

Scritto in Ruby e supporta SASS, Less.

Aggiornamento:

Un altro grande alternativa: uncss.

Funziona su più file e supporta CSS con Javascript-iniettato.

+0

+1 è un ottimo strumento e la migliore soluzione a questo problema che ho visto finora. – steveax

+0

Non esattamente quello che stavo cercando, ma in effetti la soluzione migliore di tutto quello che ho visto –

+0

csscss è un ottimo strumento ma afak trova solo css ridondanti, non css non usati – Kyle

2

Dust Me Selecters e/o CSS Usage estensioni di Firefox possono aiutare a estirpare inutilizzato CSS.

Negli Strumenti per sviluppatori di Chrome è possibile utilizzare lo strumento Web Page Performance per trovare regole CSS inutilizzate.

+2

Va bene ma non è perfetto: entrambi sarebbero comunque in grado di lavorare solo con CSS compilati, mentre preferirei uno strumento che può passare attraverso i file MENO e fare il lavoro –

+0

Interessante.Non sono a conoscenza di nulla che possa risalire a questo precompilato ... Forse sei su qualcosa. Uno potrebbe potenzialmente utilizzare gli strumenti esistenti per rilevare i CSS inutilizzati e quindi calcolare il LESS/SASS rilevante da lì. Se decidi di farlo diventare un progetto, aggiungimi su GitHub. – TomDunning