CSS: variabili e proprietà custom

Short link

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

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.