Come usare le variabili CSS per personalizzare facilmente il sito

Negli ultimi anni, le variabili CSS (chiamate anche CSS Custom Properties) sono diventate uno strumento fondamentale per chi vuole creare siti web flessibili, personalizzabili e facili da mantenere.
Se in passato ogni cambiamento di colore o font richiedeva decine di modifiche nel foglio di stile, oggi basta aggiornare una sola variabile per dare un nuovo look a tutto il sito.

In questo articolo vedremo cos’è una variabile CSS, come dichiararla e usarla, e alcuni esempi pratici per sfruttarla al meglio.

Cosa sono le variabili CSS?

Le variabili CSS sono valori riutilizzabili che puoi definire una volta e poi richiamare ovunque nel tuo stylesheet.
Si scrivono con il prefisso -- e vengono lette tramite la funzione var().

Ecco un esempio:

:root {
--colore-primario: #4CAF50;
--colore-secondario: #333;
--font-principale: 'Poppins', sans-serif;
}body {
font-family: var(–font-principale);
color: var(–colore-secondario);
}

button {
background-color: var(–colore-primario);
color: white;
}

La pseudo-classe :root rappresenta l’elemento più alto del documento (l’html) ed è il punto ideale dove dichiarare le variabili globali.
Puoi poi richiamarle ovunque con var(--nome-variabile).

Perché usare le variabili CSS

Ecco alcuni vantaggi concreti:

  1. Manutenzione più semplice
    Vuoi cambiare il colore principale del sito? Ti basta modificare una sola riga nel :root.

  2. Temi personalizzati
    Puoi creare versioni chiare e scure del tuo sito semplicemente ridefinendo alcune variabili.

  3. Coerenza visiva
    Tutti gli elementi usano gli stessi valori, evitando discrepanze grafiche.

  4. Dinamismo
    Le variabili CSS possono essere cambiate anche via JavaScript, permettendo una personalizzazione in tempo reale (ad esempio per uno switch “dark mode”).

Esempio pratico: Dark Mode con variabili CSS

Creiamo un tema chiaro e uno scuro senza duplicare il CSS.

:root {
--bg-color: #ffffff;
--text-color: #222;
}[data-theme=“dark”] {
–bg-color: #222;
–text-color: #f1f1f1;
}

body {
background-color: var(–bg-color);
color: var(–text-color);
}

E poi in JavaScript:

const toggleTheme = () => {
document.body.dataset.theme =
document.body.dataset.theme === "dark" ? "light" : "dark";
};

Basta un click per passare da chiaro a scuro, senza riscrivere il CSS!

Best practice

  • Dai alle variabili nomi chiari e coerenti (--primary-color, --font-size-large, ecc.).

  • Usa :root per le variabili globali e definisci variabili locali in componenti specifici.

  • Ricorda che le variabili rispettano l’ereditarietà, quindi puoi sovrascriverle in determinati contesti (es. un componente o un tema diverso).

Conclusione

Le variabili CSS sono una delle funzionalità più utili e sottovalutate del moderno sviluppo front-end.
Con pochi accorgimenti puoi ottenere siti più flessibili, coerenti e facili da aggiornare — perfetti per chi ama sperimentare o mantenere progetti a lungo termine.