#180 Finding Unused CSS

Qualsiasi sito web di dimensioni medio-grandi probabilmente ha un grosso ammontare di stili CSS definiti su uno o più fogli di stile e parimenti una alta probabilità che ci siano alcuni selettori obsoleti in tali fogli di stile. Questi selettori dovrebbero essere rimossi, ma lo sono raramente, perchè esiste sempre un piccolo rischio che siano ancora usati da qualche parte nel sito. Fortunatamente esistono un paio di strumenti utili per ispezionare il sito alla ricerca dei CSS non più utilizzati e vi daremo un’occhiata proprio in questo episodio.

Dust-Me Selectors

La prima soluzione che analizziamo è un plugin di Firefox chiamato Dust-Me Selectors. Una volta installato, è possibile puntare a una pagina web, cliccare sullo spolverino rosa presente nella barra di stato in basso e Dust-Me Selectors analizzerà i fogli di stile della pagina, mostrando al termine una pop up di report che mostra i selettori non usati in quella pagina.

Naturalmente è possibile che alcuni selettori CSS possano essere marcati come inutilizzati in quanto gli elementi che ne fanno uso sono presenti in altre pagine. Per aiutare anche a fronte di questa evenienza, Dust-Me Selectors ha un tab denominato Spider Log che accetta l’URL di una mappa del sito. Dust Me Selectors in tal caso restituisce nel report i selettori che non sono stati trovati in nessuna delle pagine presenti nella mappa del sito, il che fornisce una indicazione molto più accurata circa i selettori CSS che sono relalmente inutilizzati.

Deadweight

Dust-Me Selectors rappresenta una soluzione valida per trovare i CSS obsoleti di un sito, ma come potremmo fare ad avere uno strumento più integrato nelle applicazioni Ruby on Rails e che permetta di avere un maggior controllo sugli script? Potremmo usare un gem chiamato Deadweight. Fa esattamente ciò che vogliamo, esaminando i CSS di una applicazione Rails per trovare i selettori inutilizzati e usando codice Ruby per indicare le pagine e i fogli di stile da interpretare.

Per installare il gem, per prima cosa dobbiamo assicurarci di avere Github nella nostra lista dei repository sorgente. Se così non fosse, potremmo aggiungerlo chiamando:

gem sources -a http://gems.github.com

Una volta aggiunto tale repository, possiamo installare il gem:

sudo gem install aanand-deadweight

Creare un task rake

La modalità tipica per lanciare Deadweight è tramite un task rake, per cui creiamo un file denominato deadweight.rake sotto la cartella /lib/tasks della nostra applicazione.

In cima al file dobbiamo aggiungere il require del gem Deadweight. Dobbiamo stare attenti quando introduciamo dei require nei task rake. Se, per dire, il gem non è installato nel server di produzione, allora ogni task rake smetterà di funzionare. Per prevenire questa spiacevole evenienza, racchiudiamo il comando di require in un blocco begin/rescue:

begin
  require 'deadweight'
rescue LoadError
end

Ora possiamo scrivere il resto del task:

desc "run Deadweight (requires script/server)"
task :deadweight do
  dw = Deadweight.new
  dw.stylesheets = ['/stylesheets/application.css']
  dw.pages = ['/']
  puts dw.run
end

Partiamo aggiungendo una descrizione del task, poi creiamo il task stesso. Esso creerà una nuova istanza di Deadweight e poi indicherà il percorso completo ai fogli di stile e alle pagine che devono essere interpretate. Finiamo con lo stampare il risultato del lancio di Deadweight.

Si noti dalla descrizione che occorre aver fatto partire il server (script/server) per poter lanciare con successo il nostro task. Col server su, possiamo provare il nostro task:

$ rake deadweight
(in /Users/asalicetti/rails/asciicasts)
/stylesheets/application.css
/
  html
  body
  h1
  ...
found 31 unused selectors out of 60 total
h2 a
code
pre
form.searchForm input[type=text]
form.searchForm input[type=submit]
...

L’output (tagliato) di sopra mostra una lista di selettori che si sono trovati nella pagina, seguita da una lista di quelli per i quali non è stato trovato alcun match. Ci sono 31 selettori inutilizzati nella lista di sopra, ma stiamo controllando solo sulla home page, per cui dovremmo aggiungere anche le altre pagine della nostra applicazione all’array di pagine fra cui Deadwood cerca. Un modo per capire quale sia l’insieme delle pagine fra cui cercare è quello di usare rake routes per vedere la lista degli instradamenti della nostra applicazione.

Per avere un quadro più accurato dei selettori inutilizzati nei nostri fogli di stile, aggiungiamo un altro po’ di pagine del nostro sito all’array di pagine fra cui eseguire la ricerca. Non è una lista completa, ma è sufficiente a coprire la maggior parte del sito:

dw.pages = ['/', '/episodes/all', '/about', '/episodes/150-rails-metal', '/episodes/155-beginning-with-cucumber', '/search/index']

Se rilanciamo rake deadweight, questi esplorerà, anche le nuove pagine fornite e vedremo una lista più ridotta rispetto a prima dei selettori inutilizzati: (ancora una volta, di seguito, si è tagliata la lista completa per ragioni di spazio.)

$ rake deadweight
(in /Users/asalicetti/rails/asciicasts)
/stylesheets/application.css
/
  html
  body
  h1
  ...
/episodes/all
  dl#episodeArchive dt
  dl#episodeArchive dd
/about
/episodes/150-rails-metal
  h2 a
  code
  pre
  ...
/search/index
found 10 unused selectors out of 60 total
form.searchForm input[type=text]
form.searchForm input[type=submit]
code.terminal
...

Se ci sono dei selettori che sappiamo essere usati nel sito, ma che vengono mostrati solo in determinate circostanze, tipo i selettori usati per mostrare i messaggi di errore o quelli delle notifiche flash, possiamo usare ignore_selectors per escluderli dal risultato:

dw.ignore_selectors = /flash_notice|flash_error|errorExplanation|fieldWithErrors/

Lanciando ora rake deadweight, ci verrà restituita una lista ancor più ridotta rispetto a prima. Ora ce ne sono pochi abbastanza per poter lavorarci manualmente e capire se e quali si possano effettivamente rimuovere. Per quelli di cui non siamo sicuri, potremmo utilizzare il Find in Project di TextMate (o qualsiasi altro strumento analogo in un altro editor) per trovare nel sito gli eventuali match.

E’ tutto per questo episodio. Abbiamo trattato la maggior parte delle funzionalità di base di Deadweight, ma esistono ancora altre opzioni più avanzate che vale la pena di esplorare. Sono spiegate in dettaglio nella pagina di GitHub di Deadweight.