Come analizzare le variabili CSS e trovare quelle non referenziate

Incolla il CSS, avvia l’analisi e confronta le dichiarazioni personalizzate con i riferimenti var(--nome). Il risultato mostra i nomi riconosciuti, i conteggi e le dichiarazioni senza un riferimento corrispondente.

A cosa serve

CSS Variables analizza il testo CSS che fornisci per riconoscere le dichiarazioni di proprietà personalizzate, cioè quelle il cui nome inizia con --. Conta inoltre i riferimenti var(--nome) individuati nel testo e segnala le dichiarazioni per cui non trova un riferimento corrispondente. È utile per fare una prima verifica dei token CSS in un foglio di stile e individuare proprietà apparentemente non utilizzate.

L’analisi riguarda soltanto i modelli di dichiarazione e di riferimento riconosciuti dallo strumento. Non sostituisce un parser CSS completo né una verifica del comportamento effettivo delle variabili.

Come usare lo strumento

1. Prepara il testo CSS da esaminare. Puoi includere dichiarazioni come --colore-principale: #245; e riferimenti come color: var(--colore-principale);.

2. Incolla il contenuto nel campo di testo dedicato. Se sono disponibili più modalità di inserimento, il testo non vuoto inserito nel campo principale ha la precedenza sull’altro valore CSS supportato.

3. Avvia l’elaborazione. Il testo selezionato non può essere vuoto: in quel caso lo strumento restituisce un esito non riuscito. Se il contenuto provoca un’eccezione durante l’elaborazione, anche questa viene restituita come esito non riuscito invece di interrompere l’operazione.

4. Esamina il riepilogo. Lo strumento riconosce una dichiarazione quando il nome comincia con due trattini, contiene caratteri di parola o trattini, ed è seguito da due punti, da un valore e da un punto e virgola. Il valore estratto viene ripulito dagli spazi iniziali e finali.

5. Confronta i nomi. I riferimenti riconosciuti iniziano con var(--nome). Ogni riferimento viene conteggiato per nome, includendo anche il contenuto facoltativo tra parentesi. Le dichiarazioni senza un riferimento con lo stesso nome vengono incluse nell’elenco delle proprietà non referenziate.

Come leggere il risultato

Un’analisi riuscita riporta le dichiarazioni riconosciute, il totale delle dichiarazioni e il totale di quelle non referenziate, insieme al conteggio dei riferimenti per ciascun nome. Un nome presente tra le dichiarazioni ma assente dai riferimenti riconosciuti viene quindi segnalato come non referenziato.

Interpreta questo elenco come un controllo strutturale del testo, non come una prova che una variabile sia inutilizzata in ogni situazione. Un riferimento scritto in una forma che non rientra nei modelli riconosciuti può non essere conteggiato. Allo stesso modo, il risultato non valuta i valori delle variabili, non risolve i fallback e non individua ogni possibile uso delle proprietà personalizzate.

Per una revisione più affidabile, controlla il codice originale dopo l’analisi e verifica manualmente le voci segnalate, soprattutto quando il foglio di stile contiene sintassi complessa o casi non standard.

Esempio pratico

Un foglio di stile definisce --spazio-base: 1rem; e usa quel nome in margin: var(--spazio-base);.

Incolla il testo CSS e avvia l’analisi, poi verifica il confronto tra --spazio-base e il riferimento var(--spazio-base) nella dichiarazione del margine.

Il risultato riuscito riporta la dichiarazione personalizzata riconosciuta, il totale delle dichiarazioni, il totale delle dichiarazioni non referenziate e il conteggio del riferimento per nome.

Limiti

• L’analisi non equivale a un parsing CSS completo: riconosce soltanto i modelli previsti per dichiarazioni e riferimenti.
• Non valuta i valori, non risolve i fallback e non stabilisce ogni possibile uso delle proprietà personalizzate.

Errori comuni

• Lasciare vuoto il testo o omettere il punto e virgola. Un input vuoto produce un esito non riuscito, mentre una dichiarazione senza la forma riconosciuta, incluso il punto e virgola finale, può non essere estratta. Inserisci CSS non vuoto e verifica la sintassi di ciascuna dichiarazione personalizzata.

Domande frequenti

Posso analizzare qualsiasi sintassi CSS?

Sì, se il testo contiene dichiarazioni riconosciute con nomi che iniziano con -- e termina ogni dichiarazione con un punto e virgola. Le dichiarazioni non conformi al modello riconosciuto possono non comparire nel risultato.

Come vengono contati i riferimenti alle variabili?

Il conteggio aumenta per ogni riferimento riconosciuto nella forma var(--nome), anche quando tra le parentesi è presente contenuto facoltativo. Il riferimento deve però rientrare nel modello riconosciuto.

Una voce non referenziata è certamente inutile?

No: l’elenco segnala soltanto che non è stato trovato un riferimento riconosciuto con lo stesso nome nel testo analizzato. Non dimostra che la proprietà sia inutilizzata in ogni contesto CSS.