strumento di pulizia regola CSS

Question

Abbiamo diversi file CSS di massa che continuava a crescere nel corso degli anni ogni volta nuovi elementi sono stati aggiunti al nostro sistema, così come le pagine JSP (che includono ulteriori altre pagine JSP e così via) che fanno riferimento a questi file.

Sappiamo che abbiamo molte regole che non sono più utilizzati e molti che sono ridondanti.

I nuovi strumenti appena continuano a venire fuori. Esiste uno strumento che (oltre a quelli ovvi come l'Aptana e W3C del validatore CSS) in grado di analizzare una directory e di aiuto nella pulizia e l'ottimizzazione regole CSS?

Answer 1

Si tratta di un compito difficile ... soprattutto se il contenuto HTML DOM è generato al volo in alcun modo.

Il plugin Dust-Me-selettori è utile, ma su una base page-by-page, un sacco di selettori resta inutilizzato ... ma non NECS essere valido.

Ci sono alcuni trucchi che ho usato per contribuire a disinquinare.

Uno per uno, inserire qualche styling HORRID che sarete in grado di individuare immediatamente per determinare se si utilizza un selettore. per es.

border:6px dashed #ffaacc;
padding:12px;

Tutto ciò che rende con un enorme bordo rosa caldo tratteggiata ora ... è un selettore "attivo". Se è possibile navigare la maggior parte del tuo sito / app senza vederlo, allora è probabile che "morto".

(se il codice CSS viene "generato" è possibile ottimizzare questo per testare con i vari colori in una sola volta, e utilizzare contenuti generati inserire come prefisso il "id" del selettore)

Un'altra opzione se si utilizza un sistema di CSS generato ... è quello di aggiungere una proprietà finale al vostro selettore che imposta dicono ... un'immagine di sfondo con un URL generato. per es.

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

Quindi è sufficiente navigare il vostro sito / app per un po 'poi controllare il vostro web log per le richieste HTTP immagine ... per qualsiasi URL dell'immagine generata che non è stato richiesto nel registro ... probabilmente hai trovato un "morto "selettore.

Answer 2

plug Dust-Me-selettori per Firefox, anche se si guarda attraverso una pagina visualizzata nel browser, ovviamente, non attraverso una directory.

Answer 3

Selenio consente di automatizzare il test della pagina e selezionare gli elementi tramite selettori CSS. Se si accumulano le partite attraverso il sito che si sarebbe in grado di identificare gli elementi non corrispondenti.