C'è un modo per trovare CSS inutilizzati in un sito web?

Question

C'è un modo per trovare CSS non utilizzati in un sito Web?

Sto cercando di ripulire un progetto che ho appena ereditato.

Answer 1

Dust-me Selectors è un plug-in per Firefox che trova selettori inutilizzati.

Answer 2

Ho appena incontrato questo e ricordato la tua domanda: http://github.com/geuis/helium-css

Answer 3

C'è così tanto che si può dire sui metodi di best practice per i CSS. Cercherò di attenermi ai punti principali.

Utilizzare un reset CSS.

Provare a rimuovere istruzioni CSS generiche come h1 {} e #container em {}. Stai molto meglio usando h1.section-title e #container em.important {}, perché in questo modo se scegli di utilizzare h1 o em in un modo diverso da qualche parte nel documento, non devi preoccuparti di ignorare qualsiasi codice esistente.

Non essere troppo specifico nei selettori CSS se non è necessario. Devi solo avere un alto grado di specificità se essere in una sezione specifica cambia il modo in cui l'elemento verrà visualizzato. Altrimenti, per rendere riutilizzabile il codice per la tua classe block, #container .content .block ... potrebbe essere ridotto a .block ... in molti casi.

Cerca elementi comuni nel tuo CSS e vedi se riesci a creare classi riutilizzabili. Se si dispone di blocchi simili class="favorites" e class="popular", trasformarlo in class="block block-favorites" e class="block block-popular" e inserire le parti comuni in .block.

Prendi l'abitudine di rendere le aree nel tuo CSS hanno una larghezza automatica (può essere fatto in modo implicito) in modo che crescano alla larghezza dei contenitori. Ciò rende incredibilmente più semplice spostare sezioni da una porzione ristretta del tuo sito web a un'ampia porzione del tuo sito web senza dover modificare alcun codice.

Commentare il codice e scomporlo in sezioni di solito aiuta a rendere il codice più leggibile.

Sareste sorpresi di quanto sia più pulito il vostro codice quando si implementano selettori CSS più potenti. Molti di questi sono compatibili con browser diversi (Internet   Explorer 7 e versioni successive).
Alcune risorse preziose: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

Risposta spostati da:
Best Practices for Cleaning up Existing CSS/unused styles

Answer 4

Chrome 59 ha display integrato la copertura per i CSS e JavaScript dal 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

È possibile attivarlo aprendo gli strumenti di sviluppo, quindi il comando nu (Cmd+Shift+P su Mac o Ctrl+Shift+P su Windows e Linux), quindi digitare "mostra copertura".