Le variabili CSS sono state definite nelle specifiche unitamente alle proprietà custom (personalizzate). In questo articolo vedremo come le variabili CSS possono essere impiegate per rendere più gestibili i fogli di stile.

In progetti di grandi dimensioni, i file CSS possono contenere regole di stile ripetute in più punti. Come ricordano giustamente le specifiche:

Many of the values in the CSS file will be duplicate data; for example, a site may establish a color scheme and reuse three or four colors throughout the site. Altering this data can be difficult and error-prone, since it’s scattered throughout the CSS file (and possibly across multiple files), and may not be amenable to Find-and-Replace.

Prima dell'introduzione delle variabili CSS, questo problema veniva risolto scrivendo classi CSS per gli stili comuni.

.main-bg {
    background-color: #f5f5f5;
}

.main-text {
    color: #000;
}        

Il punto debole di questa soluzione è che ci costringe ad alterare la struttura HTML delle pagine e quindi non fa che ripresentare il problema visto in precedenza.

Invece, possiamo definire una serie di proprietà custom (con il prefisso --) su un elemento genitore e riutilizzarle dove necessario usando la funzione var().

L'esempio con le classi può essere riscritto come segue:

:root {
    --main-bg: #f5f5f5;
    --main-text: #000;
}

Quindi possiamo utilizzare questi due valori come segue:

.notice {
    background-color: var(--main-bg);
    color: var(--main-text);
}

I browser sostituiranno le variabili con i valori definiti nelle proprietà custom usando la funzione var(). Quindi se in futuro dovessimo modificare il tema in uso, dovremo semplicemente modificare i valori delle proprietà custom senza essere costretti a sostituire tutte le ricorrenze di tali valori.

Abbiamo usato lo pseudo-elemento :root nell'esempio non perché sia obbligatorio, ma affinché il codice CSS possa essere riutilizzato in altri linguaggi di marcatura oltre ad HTML. Questo pseudo-elemento infatti seleziona l'elemento radice del documento, che in HTML è sempre html ma che in XML, ad esempio, può essere qualsiasi elemento definito dall'autore.

Documentazione

CSS Custom Properties for Cascading Variables Module Level 1