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