Variabili CSS (Custom Properties): --variabile, var(), fallback

Il colore del tuo brand compare in venti punti del CSS. Il giorno in cui cambia, hai due opzioni: cercarlo e sostituirlo venti volte, o cambiarlo una sola volta in un punto e vederlo aggiornarsi ovunque. Le custom properties esistono esattamente per questo.

1. Dichiarare e leggere: -- e var()

Una custom property si dichiara con un nome che inizia per -- (doppio trattino) e si legge con la funzione var().

:root {
    --colore-brand: #5B3E9B;
}

.bottone {
    background-color: var(--colore-brand);
}

La funzione var() accetta un secondo argomento opzionale: il fallback, usato se la variabile non è definita. È utile per componenti pensati per essere riusati in contesti diversi, senza obbligare chi li usa a definire ogni singola variabile.

.badge {
    color: var(--colore-badge, black);
    /* nero se --colore-badge non e' definita */
}

Fonte: MDN Web Docs — «var()»: la funzione accetta un valore di fallback usato quando la proprietà personalizzata non è definita.

2. :root vs scope di componente: dove dichiararla conta

Il selettore su cui dichiari una custom property definisce il suo scope: la sua "area2 di validità". Dichiararla su :root la rende disponibile globalmente in tutto il documento. Dichiararla su un selettore più specifico la limita a quel componente e ai suoi discendenti.

:root {
    --spaziatura-base: 1rem;
    /* disponibile ovunque */
}

.card {
    --colore-sfondo-card: teal;
    /* disponibile solo dentro .card e i suoi figli */

    background-color: var(--colore-sfondo-card);
}

Questo permette di avere la stessa variabile con un nome, ma valori diversi in componenti diversi — ogni componente «vede» la propria versione, senza conflitti globali.

Fonte: MDN Web Docs — «Using CSS custom properties»: il selettore assegnato a una regola definisce lo scope in cui la proprietà personalizzata può essere usata; buona pratica comune è definirle su :root per un uso globale.

3. Cascata ed ereditarietà: non sono statiche

Le custom properties partecipano alla cascata ed ereditano il proprio valore dal genitore, proprio come color o font-family. Questo significa che un elemento figlio, se non ridefinisce la variabile, riceve automaticamente il valore ereditato dal suo antenato più vicino che l'abbia impostata.

.sezione {
    --colore-testo: navy;
}

.sezione p {
    color: var(--colore-testo);
    /* eredita 'navy' dalla .sezione */
}

4. Override in media query: la base del theming

Perché le variabili sono valutate a runtime (non «sparite» dopo la compilazione, come accade con i preprocessori), puoi ridefinirle dentro una media query e ogni var() che le usa si aggiorna automaticamente, senza toccare il resto del CSS.

:root {
    --colore-sfondo: white;
    --colore-testo: black;
}

@media (prefers-color-scheme: dark) {
    :root {
        --colore-sfondo: #1B2A3A;
        --colore-testo: #F4F2F8;
    }
}

body {
    background-color: var(--colore-sfondo);
    color: var(--colore-testo);
}

Questo è, in pratica, il meccanismo dietro la maggior parte dei sistemi di dark mode e theming moderni: un solo set di regole che usano var(), e uno o più blocchi che ridefiniscono i valori in base al contesto.

Fonte: MDN Web Docs — «Using CSS custom properties»: le custom properties possono essere ridefinite dentro media query, permettendo pattern di theming senza duplicare le regole.

In sintesi

Le custom properties non sono solo «numeri con un nome»: sono valori vivi nel browser, che partecipano alla cascata esattamente come ogni altra proprietà ed è proprio questo a renderle lo strumento giusto per temi, dark mode e componenti riusabili.