Variabili CSS, come e quando usarle

Le variabili CSS, da non confondere con le variabili dei pre processor come SASS o LESS, sono in giro da parecchio ma solo negli ultimi anni si è iniziato a vedere qualche utilizzo nel mondo reale grazie anche al migliorato supporto da parte dei vari browser, tranne come al solito Internet Explorer.

Cosa sono esattamente le variabili CSS?

Le variabili CSS ci permettono di specificare un valore e ripeterlo più volte all’interno del nostro foglio di stile, un esempio?

:root {
  --colore-principale: #333;
  --colore-titoli: #000;
} body {
  color: var(--colore-principale);
} h1 {
  color: var(--colore-titoli);
} h2 {
  color: var(--colore-titoli);
} 

Questo è un semplice esempio con i colori, ma potete tranquillamente applicare lo stesso approccio anche per le spaziature, creando di fatto una specie di indice che vi risparmierà tanto tempo di ricerca e sostituzione qualora aveste la necessità di cambiare un valore in applicato in più punti.

A questo punto starete pensando, beh ma una sostituzione in batch con un editor di testo come Sublime Text o Visual Studio Code si fa in pochi secondi, dov’è il gran vantaggio delle variabili?

Pensate per un attimo di dove alterare dei parametri a seconda di una classe, come per esempio il cambio della skin o il cambio delle spaziature ad una determinata media query.

:root {
  --colore-principale: #333;
  --colore-sfondo: #fff;
  --gutter: 30px;
} @media screen and (max-width:768px) {
  :root {
    --colore-principale: #fff;
    --colore-sfondo: #111;
    --gutter: 15px;
  } } body {
  color: var(--colore-principale);
  background-color: var(--colore-sfondo);
  padding: 0 var(--gutter);
} 

Grids e le variabili

Quando abbiamo iniziato a sviluppare il concept del nostro plugin Grids ci siamo chiesti come fare per ottimizzare il più possibile il codice ed evitare che Javascript si facesse carico di stampare del CSS inline ad ogni cambio di proprietà dai controlli alla preview nel block editor aka Gutenberg. Abbiamo deciso quindi di sperimentare un approccio basato interamente sulle variabili.

Le variabili possono essere definite globalmente come abbiamo visto nell’esempio precedente o all’interno di un elemento, nel nostro caso il contenitore di markup della sezione:

.grids-areas-wrapper {
    --section-columns: 1fr 1fr 1fr 1fr;
    --section-rows: auto;
    --section-gutter: 0px;
    --section-background-repeat: no-repeat;
    --section-background-size: auto;
    --section-background-attachment: scroll;
    --section-background-position-x: 50%;
    --section-background-position-y: 50%;
} 

In questo modo siamo in grado cambiare una variabile e lasciare che sia il browser ad applicare tramite CSS il cambiamento al nostro elemento.

Compatibilità nel mondo reale e considerazioni

Bene, vi ho convinto a sperimentare con le variabili ma fermi tutti, dovete assolutamente supportare IE nel vostro progetto!

La buona notizia è che potete utilizzare il css-vars-ponyfill realizzato da John Hildenbiddle, utilizzato peraltro in Grids, ma la cattiva notizia è che non supporta le variabili nelle media queries, cosa purtroppo molto limitante dal punto di vista creativo.