Variabili CSS in Pure CSS: per iniziare in 5 minuti o meno

Le variabili CSS (o ufficialmente: proprietà personalizzate ) in CSS puro sono un enorme risparmio di tempo per chiunque sia disposto a investire cinque minuti per imparare a usarle. Sono in circolazione dai CSS3 e il 92% di tutti gli utenti ha browser che li supportano. L'uso delle variabili CSS non richiede modifiche significative ai fogli di stile esistenti o ai nuovi strumenti e può essere facilmente applicato a vecchi progetti. Invece di avere un codice colore esadecimale scritto in centinaia di posti in un file, puoi averlo definito in un solo posto, con una variabile CSS. Un enorme risparmio di tempo e un aiuto per rendere i fogli di stile più coerenti.

Aspetta, quindi questo è Saas o Less, giusto?

No, stiamo parlando di puro CSS qui, non CSS accoppiato con un preprocessore come Saas, Less o SCSS. L'uso delle variabili CSS non richiede strumenti aggiuntivi, editor o modifiche al flusso di lavoro o qualsiasi altra cosa che utilizzi. Pertanto, i file CSS esistenti senza variabili non richiedono modifiche "speciali" e puoi combinare e abbinare: usa le variabili solo per parti del file o solo in alcuni file è il tuo progetto.

Anche i preprocessori CSS come Saas o Less supportano le variabili. Inoltre, hanno molte più funzioni e opzioni che puoi utilizzare. Tuttavia, come suggerisce il nome, richiedono un preprocessore, uno strumento che converte i CSS scritti in Saas in puro CSS. Se hai solo bisogno di variabili, pure CSS ha tutto ciò di cui hai bisogno.

Le variabili CSS sono una funzione nativa e questo è ciò che le rende eccezionali. Con il minimo sforzo, i tuoi fogli di stile sono molto più leggibili e coerenti. Inoltre, tutte le modifiche che devi apportare in seguito sono molto più facili da fare, sicuramente più veloci rispetto a cercare e sostituire quando devi cambiare un codice colore in centinaia di punti .

Creiamo alcune variabili

Come in qualsiasi linguaggio di programmazione, ci sono due passaggi per usare le variabili : dare loro un valore (definirle) e usarle (mettendole in tutti i punti in cui è necessario quel valore). Faremo lo stesso;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Se vuoi usare una variabile globalmente (ovunque) nel file CSS, devi definirla nella pseudo-classe :root . La posizione nel file non ha importanza. Può essere all'inizio o alla fine del file. Ma devi mettere la variabile in :root . Il nome deve iniziare con un doppio trattino -- non può contenere spazi. Le variabili CSS possono contenere qualsiasi valore che di solito assegni a una proprietà CSS; da valori semplici come i colori a espressioni complesse per proprietà abbreviate come lo sfondo o l'ombra.

Per usare una variabile (per ottenerne il valore) mettila nella funzione var() . Non dimenticare che tutti i nomi delle variabili iniziano con -- . Questo è tutto ciò che devi sapere per iniziare.

Utilizzo dei valori di fallback

Nel caso in cui una variabile non sia definita, è possibile fornire un valore di fallback alla funzione var() come secondo parametro.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Non preoccuparti se il valore della proprietà è complesso. Il parametro di fallback non consente le virgole (vedi esempio box-shadow ). Consente inoltre il concatenamento di più funzioni var() come mostrato per il colore in .custom-text . Se --my-red e --my-blue non sono definite, il rosso verrà utilizzato come colore.

Anche la combinazione di var() e calc() funziona, senza sorprese nella sintassi. Ecco un esempio che include una variabile locale disponibile solo nella classe in cui è stata definita.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Usa calc() con parsimonia. Non è una brutta cosa, ma quando viene utilizzato in modo eccessivo diventa piuttosto problematico eseguire il debug e la manutenzione.

Ottenere e impostare variabili CSS tramite JavaScript

Utilizzando JavaScript semplice, puoi impostare nuove variabili CSS e accedere ai loro valori. Non uso questo metodo. Invece, preferisco cambiare la classe dell'elemento. Tuttavia, non c'è niente di sbagliato se vuoi accedere alle variabili CSS tramite JavaScript. È sicuramente utilizzabile in alcune situazioni. Coloro che si attengono a jQuery, possono convertire il codice in un plug-in jQuery.

Per creare una nuova variabile o modificare il valore di una esistente utilizzare:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

L'accesso a una variabile è un po' più complesso. Se la variabile è definita tramite JS, utilizzare:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Tuttavia, se è definito tramite CSS (e di solito lo sarà), usa questo codice:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Problemi e cose a cui prestare attenzione

Ora che sai come usare le variabili, non esagerare e crea una variabile per ogni singolo valore di proprietà nel foglio di stile. Ad esempio, questo sarebbe eccessivo e abuso dell'intero concetto;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Non hai ottenuto nulla. Ho appena ricevuto --spacing-10 invece di 10px . Presto finirai per creare altre venti variabili per ogni valore di pixel di riempimento compreso tra 5px e 100px. Se stai cercando la coerenza, vai con un concetto di --small-padding, --medium-padding, --large-padding e assegna valori numerici appropriati.

Sebbene non sia richiesto dallo standard CSS, suggerisco vivamente di definire tutte le variabili in un unico posto e all'inizio del file CSS . In questo modo saprai sempre dove si trovano e potrai cambiare rapidamente i valori. Se disperdi le definizioni in tutto il file, avrai difficoltà a tenere traccia delle cose e potresti finire per definire la stessa variabile in più punti. Debug che non sarà un compito divertente.

Non c'è motivo per non utilizzare le variabili CSS

Su Internet, le cose vanno avanti velocemente (come i cookie sostituiti dalla memoria locale). Per grandi progetti e grandi team, il passaggio a preprocessori CSS come Saas è la strada giusta da percorrere. Tuttavia, per progetti più piccoli o progetti esistenti che richiedono manutenzione, le variabili CSS in puro CSS sono la soluzione giusta . Non richiedono assolutamente modifiche, aggiornamenti software o strumenti o altro. Definisci una variabile e inizi a usarla.