Custom properties: dichiarazione (--nome: valore) e utilizzo (var(--nome))

Immagina di aver costruito un intero sito web e di aver usato lo stesso blu (#007bff) per bottoni, link, bordi e sfondi. Lo hai ripetuto in molti punti diversi del CSS. Un giorno, il cliente ti chiama e dice: “Ho cambiato idea, il brand ora è rosso”.

Senza le variabili, dovresti fare un “Trova e sostituisci” sperando di non modificare valori che non c’entrano. Con le variabili CSS (o custom properties), cambi una singola dichiarazione e tutti gli usi collegati si aggiornano.

1. Dichiarare una Variabile

Le variabili CSS si dichiarano sempre anteponendo un doppio trattino (--) al nome che decidi di dargli. Non ci sono limiti alla fantasia per i nomi, ma cerca di essere semantico.

Di solito, le variabili globali del sito vengono dichiarate all’interno di un selettore speciale chiamato :root. Il :root è il genitore supremo di tutto il documento (è l’equivalente del tag <html>, ma ha una specificità più alta).

:root {
  /* Dichiarazione delle nostre variabili */
  --colore-primario: #007bff;
  --colore-secondario: #6c757d;
  --spaziatura-base: 16px;
  --font-principale: 'Inter', sans-serif;
}

2. Utilizzare una Variabile

Per usare la variabile al posto di un valore statico, devi “chiamarla” usando la funzione var().

.pulsante {
  /* Invece di scrivere background-color: #007bff; */
  background-color: var(--colore-primario);
  
  padding: var(--spaziatura-base);
  font-family: var(--font-principale);
  color: white;
  border-radius: 8px;
}

.link-testo {
  color: var(--colore-primario);
}

Se adesso cambi --colore-primario in #ff0000 (rosso) nel :root, sia il bottone che il link useranno il nuovo colore.

Valori di fallback (di sicurezza)

Cosa succede se fai un errore di battitura e scrivi var(--colore-sbagliato)? Il browser ignorerà la riga perché la variabile non esiste. Puoi prevenire questo fornendo un valore di “sicurezza” (fallback) come secondo parametro della funzione var().

.box {
  /* Se --colore-brand non esiste, usa il nero */
  background-color: var(--colore-brand, #000000); 
}

Nei progetti medio-grandi conviene evitare valori cromatici ripetuti direttamente dentro molte classi. Centralizzare i colori nel :root crea una tavolozza più facile da leggere, modificare e riusare.