Trova il CSS inutilizzato
Uno strumento per scovare le regole morte

Cosa fa uno strumento per il CSS inutilizzato

I fogli di stile crescono sempre. Aggiungi funzioni e cambi il design, e il vecchio codice resta. Di conseguenza, ogni visitatore scarica stili per parti del sito che non si vedono più.

Uno strumento per il CSS inutilizzato risponde a una domanda. Quali regole possono sparire senza cambiare l’aspetto di nessuna pagina? Perciò questo legge il tuo HTML, il tuo CSS e il tuo JavaScript. Poi mette ogni regola in uno di quattro gruppi.

I gruppi sono facili da leggere. Prima, le regole che niente usa. Poi, le regole in cui solo alcuni selettori dell’elenco corrispondono. Dopo, le regole tenute perché uno script potrebbe servirsene. Infine, le regole che le tue pagine usano adesso.

Il risultato è un piano, non una scommessa. Ogni regola ha il suo motivo, quindi puoi controllarla prima di eliminare qualcosa. Poi scarichi il foglio pulito in un solo passo.

Come questo strumento legge il codice per trovare il CSS inutilizzato

Il lavoro avviene in tre passaggi. Prima, la pagina trasforma il tuo HTML in un albero di elementi, ognuno con classe, id e attributi. Poi legge il tuo CSS e divide ogni elenco di selettori in selettori singoli. Infine prova ogni selettore su ogni elemento.

Il tuo browser fa tutto questo. Poiché questo sito blocca i modi non sicuri di leggere il markup, lo strumento usa un suo lettore. Così non esegue mai il codice incollato, e uno script incollato non fa nulla.

Il confronto segue le vere regole del CSS. Per esempio, uno spazio vuol dire discendente e un segno di maggiore vuol dire figlio. Inoltre :nth-child conta i fratelli proprio come un browser. Così, quando un selettore manca il tuo markup, il report lo dice.

Trova il CSS inutilizzato su più pagine

Una sola pagina raramente mostra tutto. Per esempio, una regola del checkout sembra morta nella home, eppure il checkout ne ha bisogno. Per questo lo strumento accetta tutte le pagine che gli dai.

Puoi incollare più pagine in un solo riquadro. Basta iniziare ogni nuova pagina con una riga di commento che dice page. Oppure carica i file HTML, e ogni file conta come una pagina.

Ogni regola usata dice anche dove vive. Per esempio, usata in 2 pagine su 5 ti dice che uno stile appartiene a un modello. Così questo indizio aiuta quando poi dividi un foglio grande in fogli più piccoli.

Perché una pagina non basta

La maggior parte dei siti condivide un foglio tra molti modelli. Quindi se provi una sola pagina, circa metà del file sembra inutilizzata, ed è falso. Ma aggiungi una pagina prodotto, un articolo e un modulo di contatto, e appare il vero peso morto.

La regola pratica è semplice. Aggiungi una pagina per ogni tipo che ha il tuo sito, perché lo strumento può giudicare solo le pagine che vede.

Classi che il tuo JavaScript aggiunge dopo

I menu si aprono, le schede cambiano e compaiono finestre. Ogni volta uno script aggiunge una classe, quindi all’inizio la classe non è nell’HTML. Di conseguenza, uno strumento distratto dice che quelle regole sono inutilizzate, e cancellarle rompe il menu.

Questo strumento legge anche i tuoi script. Raccoglie ogni stringa che contengono, anche i pezzi delle stringhe modello. Così, se uno script cita is-open, la regola .menu.is-open resta, con un’etichetta invece di sparire.

Anche i prefissi contano. Per esempio, uno script che costruisce btn--${state} può creare qualsiasi classe che inizia con btn--. Perciò ogni regola per quelle classi resta, e l’etichetta spiega il motivo.

I binding dei framework ricevono la stessa cura. Lo strumento legge gli attributi di classe di Vue, Alpine e Angular, più gli attributi data e gli eventi in linea. In breve, copre i soliti posti da cui arrivano le classi nascoste.

La lista protetta per tutto il resto

Alcune classi arrivano da posti che nessuno strumento sa leggere. Per esempio, un plugin può aggiungerle sul server, o un redattore può scriverle a mano. Per quelle, usa la lista protetta.

Ogni riga accetta un nome di classe, un nome con un asterisco o un modello tra barre. Così wp-* tiene tutte le classi di WordPress. Inoltre un modello come /^is-/ tiene tutte le classi di stato in un colpo.

Pseudo-classi, pseudo-elementi e stati

Molti strumenti per il CSS inutilizzato sbagliano proprio qui. Cercano .card::after o .menu summary::before, non trovano quell’elemento e danno la regola per morta. Però uno pseudo-element dà stile a una parte del suo elemento. Quindi la regola conta come usata ogni volta che l’elemento esiste.

Gli stati funzionano allo stesso modo. Quando una pagina si carica, nessuno ha ancora passato il mouse, messo il focus o spuntato qualcosa. Tuttavia i visitatori presto passano sopra e cliccano. Perciò :hover, :focus e :checked qui contano come raggiungibili.

Comunque la struttura conta. Per esempio, li:nth-child(4) in un elenco di tre voci non corrisponde mai, perché nessun clic aggiunge una quarta voce. In breve, lo strumento tiene solo ciò che potrebbe davvero corrispondere.

Rimuovere il CSS inutilizzato mantenendo il tuo formato

Trovare le regole morte è solo metà del lavoro. L’altra metà è un file pulito da pubblicare. Perciò questo strumento taglia le regole morte dal tuo stesso testo. Non ricostruisce il tuo foglio di stile.

I tuoi commenti, spazi e ordine restano. Quando solo una parte di un elenco di selettori è morta, sparisce solo quella parte. Inoltre lo strumento toglie le media query vuote.

Scegli tu la forma del risultato. Lascialo leggibile per il tuo progetto, o spunta minifica per una copia più piccola. Poi copialo, o scaricalo accanto al report CSV.

@keyframes, font e variabili morte

Le regole non sono l’unico peso morto. Un’animazione inutilizzata, un font inutilizzato e una proprietà personalizzata che nessuno legge costano anche loro byte. Perciò lo strumento elenca ognuno sotto un proprio titolo.

Questo controllo avviene dopo che le regole morte sono sparite. Di conseguenza, lo strumento segna anche un font come inutilizzato se lo usava solo una regola rimossa. Una semplice ricerca di testo non lo vedrebbe.

Trova anche l’errore opposto. Se una regola legge una proprietà personalizzata che niente imposta, lo strumento la elenca. Di solito questo indica un errore di battitura o un file mancante.

Recupera una pagina vera dal suo indirizzo

A volte hai solo l’indirizzo web. In quel caso scrivilo, e questo sito recupera la pagina, i suoi fogli di stile e i suoi script. Poi il controllo avviene nel browser come sempre.

Il recupero è prudente. Segue un livello di @import, salta gli script di altri siti e si ferma a una dimensione sicura. Così un tag manager o una chat non ti fanno perdere tempo.

Questa modalità va bene per un’occhiata veloce a un sito non tuo. Tuttavia, per il tuo progetto, incolla o carica i file sorgente. Così puoi aggiungere tutti i modelli in una volta.

Cosa lo strumento non può sapere

Nessun controllo statico vede tutto. Per esempio, una classe creata da un valore del server, o il markup che uno script carica dopo, resta nascosto. Per questo ogni rimozione ha un motivo che puoi leggere prima.

Quindi tratta il risultato come una revisione del codice. Controlla l’elenco, proteggi ciò che serve e prova il file pulito su una copia di prova. Per un secondo parere, il Coverage panel in Chrome DevTools mostra cosa ha usato una visita.