C'è un modo per identificare classi orfane in un'app web costruita con HTML, JavaScript e CSS?

Question

Ho cercato di approfondire lo sviluppo del web. Parte di questo processo ha migliorato in modo incrementale le cose sul mio sito web, cercando di imparare qualcosa di nuovo con ogni cambiamento incrementale.

Il problema con cui mi sto imbattendo è che mentre il sito si evolve, finisco per farla finita e aggiungere nuove classi ai miei elementi HTML. Ovviamente, quando creo questi selettori nel mio codice HTML, li scelgo come target nel mio JavaScript o nel mio CSS, ma spesso finisco per tornare indietro e eliminare gli elementi. Ciò lascia riferimenti orfani a questi selettori nel mio JavaScript e nel mio CSS, così come classi e id non necessari/non referenziati nel codice HTML.

La mia domanda è c'è qualche utilità che posso utilizzare per identificare questi selettori orfani sia nel mio CSS, HTML e JavaScript * in modo che possa pulire in modo sicuro questi file? Le soluzioni suggerite finora sono ottime per trovare selettori non necessari nel mio CSS, ma non sembrano aiutare a identificare classi o ID non necessari nel mio codice HTML, che è anche qualcosa che mi piacerebbe fare. C'è qualcosa che funziona in entrambe le direzioni come descritto?

* Sembra che per JavaScript/JQuery ci siano dei metodi, ma per i miei scopi, il mio JavaScript è abbastanza pulito da poterlo pulire senza aiuto, quindi va bene se il focus è su CSS e HTML.

Answer 1

Per CSS esiste un'estensione per Firefox che trova selettori CSS non utilizzati su una pagina. Ha un'opzione per spider l'intero sito. La versione 3.01 dovrebbe funzionare con le versioni più recenti di Firefox.

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Ed ecco un'altra opzione.

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

per JavaScript si sono praticamente da soli. Se si utilizza jquery, è possibile sovrascrivere la funzione $() che chiama jQuery() all'interno di tale funzione e controllare/registrare il valore restituito da jQuery per assicurarsi che tutti i selettori restituiscano alcuni risultati. Ma non è un modo deterministico di fare le cose.

Answer 2

Io uso Dust-Me Selectors (sito ufficiale) per trovare selettori orfani nel mio codice. Funziona per Firefox e Opera, sfortunatamente non penso che possa cercare codice JS o PHP, ma cercherà l'output HTML.