Variabili in CSS: scopri le Custom Properties e migliora il codice dei tuoi fogli di stile!

Introduzione alle variabili in CSS

Negli ultimi anni, le variabili in CSS (note anche come "CSS Custom Properties") hanno trasformato il modo in cui progettiamo e gestiamo lo stile dei siti web. Con l'introduzione di questa funzionalità, è diventato possibile definire dei valori riutilizzabili all'interno di un foglio di stile, portando un notevole miglioramento in termini di manutenibilità e scalabilità del codice.

Le variabili sono valori che possiamo definire una volta e riutilizzare in più punti del nostro codice e permettono di centralizzare e organizzare le proprietà che vengono usate più volte, come colori, spaziature e dimensioni dei caratteri.

Grazie alle variabili, possiamo aggiornare lo stile di un'intera interfaccia modificando un solo valore (la variabile, per l'appunto), risparmiando tempo e riducendo errori. Questo migliora la coerenza e facilita la manutenzione del codice, rendendo lo stile più flessibile e adattabile.

Cosa sono le variabili in CSS?

In CSS, una variabile è una sorta di segnaposto per un valore che può essere riutilizzato in più punti del codice. Posso definire una variabile per il colore principale della nostra interfaccia e utilizzarlo ovunque sia necessario attraverso il nome dell variabile e senza dover ripetere manualmente il valore specifico. Modificando il valore della variabile, quindi solo una volta, tutte le proprietà che richiamano tale variabile saranno aggiornate di conseguenza.

Perché usare le variabili in CSS?

Prima dell'introduzione delle variabili, i progettisti dovevano gestire lo stile globale di un sito scrivendo lo stesso valore in molteplici punti del codice o affidandosi a pre-processori CSS come Sass o Less. Oggi, con le variabili native, CSS consente di:

• migliorare la coerenza visiva: un colore, una spaziatura o un valore specifico possono essere centralizzati, eliminando la necessità di ricordare e replicare esattamente quel valore in ogni punto in cui è necessario;
• semplificare la manutenzione del codice: se devi cambiare un colore di brand, è sufficiente aggiornare la variabile e vedere la modifica propagarsi automaticamente;
• facilitare la personalizzazione dei temi: con le variabili, diventa semplice gestire variazioni di tema come modalità scura e chiara, semplicemente aggiornando i valori delle variabili;
• sfruttare la flessibilità e l'adattabilità: a differenza delle variabili dei pre-processori, le variabili CSS sono gestite direttamente dal browser e possono essere modificate anche in modo dinamico tramite JavaScript.

Un esempio semplice

Per comprendere la potenza delle variabili CSS, vediamo un esempio semplice.

:root {

  --main-color: #3498db;

  --padding-size: 16px;

}

body {

  color: var(--main-color);

  padding: var(--padding-size);

}

In questo esempio, la variabile --main-color contiene un colore e --padding-size rappresenta uno spazio di padding. Entrambe le variabili vengono poi utilizzate in successive regole CSS. Se decidiamo di cambiare il colore principale o la dimensione del padding, basterà aggiornare i valori delle variabili senza dover cercare e modificare ogni occorrenza.

Sintassi di base

Definizione delle variabili

Per definire una variabile in CSS, dobbiamo utilizzare due trattini (--) seguiti dal nome della variabile, che può essere scelto liberamente. Sono case-sensitive e devono essere definite all'interno di un selettore. Solitamente, si usano nel selettore :root per definire variabili globali accessibili in tutto il documento, ma è possibile definirle in selettori più interni per limitare l'uso della variabile a contesti più specifici.

:root {

  --primary-color: #3498db;

  --secondary-color: #2ecc71;

  --font-size-large: 24px;

} 

• --primary-color rappresenta il colore primario, #3498db.
• --secondary-color rappresenta un colore secondario, #2ecc71.
• --font-size-large rappresenta una dimensione del testo di 24px.

Utilizzo delle variabili

Per usare una variabile definita, si utilizza la funzione var(), specificando il nome della variabile tra parentesi. La sintassi è:

property: var(--nome-variabile);

h1 {

  color: var(--primary-color);

  font-size: var(--font-size-large);

}

p {

  color: var(--secondary-color);

} 

In questo caso, l'elemento h1 avrà il colore primario e la dimensione del font definiti in :root. L'elemento p userà il colore secondario.

Variabili locali e ambito di applicazione (scope)

Come già anticipato, è possibile definire variabili anche in ambiti locali, ovvero all'interno di un selettore specifico, limitando così l'accesso a quel contesto.

.card {

  --card-padding: 20px;

  padding: var(--card-padding);

}

.card--highlighted {

  --card-padding: 30px; /* Sovrascrive la variabile solo in questo contesto */

  padding: var(--card-padding);

} 

Qui, --card-padding viene ridefinita per .card--highlighted, che avrà un padding di 30px invece di 20px. La versione locale della variabile sovrascrive quella globale solo all'interno di .card--highlighted, mostrando la flessibilità delle variabili CSS.

Fallbacks nelle variabili CSS

La funzione var() accetta un secondo parametro opzionale, che rappresenta il valore di fallback. Questo valore viene utilizzato se la variabile non è definita.

button {

  color: var(--button-color, #555); /* Usa #555 se --button-color non è definita */

}

In questo caso, se la variabile --button-color non è impostata, il browser applicherà il colore di fallback #555 per i pulsanti. Questo è utile per garantire una certa sicurezza e continuità visiva in assenza di variabili.

Ereditarietà e specificità delle variabili

I meccanismi classici di ereditarietà, specificità e l'utilizzo di !important sono mantenuti inalterati anche con l'introduzione delle variabili CSS. In ognio caso, vediamo come si comportano le variabili qundo si presentano tali casistiche.

Ereditarietà delle variabili

In CSS, molte proprietà hanno un comportamento ereditario (il principio raccolto nella parola "Cascading"): quando non sono specificate per un elemento figlio, ereditano il valore dall'elemento genitore. Le variabili CSS seguono questa stessa logica e possono quindi essere ereditate lungo la struttura DOM.

:root {

  --text-color: #333;

} 

body {

  color: var(--text-color);

}

section {

    /* section eredita il colore dalla variabile nel body */

}

In questo caso, il valore di --text-color è definito globalmente in :root e viene applicato a body. Tutti gli elementi all'interno di body, inclusi quelli che non hanno un colore specificato, erediteranno --text-color.

Sovrascrittura delle variabili ereditate

Le variabili CSS possono essere sovrascritte su selettori specifici, modificando l'aspetto degli elementi figli. Definendo una nuova variabile su un elemento specifico, i suoi elementi figli useranno questa variabile invece di quella ereditata.

:root {

  --text-color: #333;

} 

body {

  color: var(--text-color);

}

.highlight {

  --text-color: #e74c3c; /* Sovrascrive il valore solo in .highlight */

}

In questo caso, tutti gli elementi con la classe .highlight avranno --text-color impostato su #e74c3c, e quindi anche gli elementi figli di .highlight useranno questo colore sovrascritto.

Specificità delle variabili

La specificità in CSS si riferisce a quanto "forte" sia una regola e in che ordine venga applicata rispetto alle altre. Le variabili CSS, in quanto proprietà di stile, seguono le stesse regole di specificità e possono essere sovrascritte a seconda della priorità del selettore.

Ad esempio, se una variabile viene definita in un selettore con specificità bassa e poi ridefinita in uno con specificità più alta, il valore con la specificità più alta prenderà il sopravvento:

:root {

  --background-color: #f5f5f5;

} 

.container {

  --background-color: #ffffff; /* Sovrascrive la variabile */

  background-color: var(--background-color);

}

.container.primary {

  --background-color: #cccccc; /* Ancora più specifico, quindi prende il sopravvento */

}

• :root definisce --background-color come #f5f5f5
• il valore viene sovrascritto da .container, che imposta --background-color su #ffffff.
• il valore cambia ancora con .container.primary, che imposta --background-color su #cccccc.

Gestione dei conflitti di variabili

È importante ricordare che quando le variabili CSS sono definite con lo stesso nome in contesti diversi, il valore con la specificità più alta sarà applicato. Questo principio consente di avere un controllo preciso e dinamico sullo stile e di applicare facilmente temi o variazioni di stile all'interno di sezioni specifiche di una pagina.

Ordine di definizione e importanza (!important)

Come per altre proprietà CSS, è possibile usare !important per forzare l'applicazione di una variabile, indipendentemente dalla specificità dei selettori.

:root {

  --button-color: #3498db !important;

} 

.button {

  --button-color: #2ecc71; /* Questo valore viene ignorato */

  color: var(--button-color);

}

In questo caso, anche se .button definisce --button-color come #2ecc71, il valore #3498db definito in :root verrà comunque applicato, perché è stato marcato come !important.

Manipolazione dinamica delle variabili CSS

Uno dei grandi vantaggi delle variabili CSS è la possibilità di modificarle dinamicamente utilizzando JavaScript. Questa caratteristica apre a moltissime possibilità creative, come la realizzazione di temi, l'aggiornamento dello stile in base all'interazione dell'utente o la gestione delle preferenze di visualizzazione (ad esempio, modalità chiara e scura).

Perché manipolare dinamicamente le variabili CSS?

• Implementare temi dinamici: come la modalità chiara/scura o temi personalizzati.
• Reattività agli input dellr'tente: ad esempio, cambiando i colori in base alle azioni dell'utente o all'interazione con determinati elementi.
• Esperienze interattive e personalizzate: ad esempio, permettendo all'utente di scegliere impostazioni di stile come colori e dimensioni dei caratteri.

Come aggiornare le variabili CSS con JavaScript

Le variabili CSS possono essere modificate direttamente attraverso JavaScript utilizzando il metodo .style.setProperty() sull'elemento che contiene la variabile (:root per le variabili globali).

// Seleziona l'elemento root

const root = document.documentElement;

// Cambia il valore di una variabile CSS

root.style.setProperty('--primary-color', '#ff6347'); // Imposta il colore

In questo esempio, la variabile --primary-color viene aggiornata a #ff6347. Tutti gli elementi che fanno riferimento a --primary-color nel foglio di stile aggiorneranno automaticamente il loro colore.

Esempio concreto: Cambiare tema con variabili CSS e JS

Uno degli utilizzi più comuni della manipolazione dinamica delle variabili CSS è la creazione di temi per la pagina, come la modalità scura e chiara. Questo può essere realizzato facilmente dichiarando i colori come variabili e modificandoli tramite JavaScript.

/* Variabili per la modalità chiara */

:root {

  --background-color: #ffffff;

  --text-color: #333333;

}

/* Stili per l'applicazione */

body {

  background-color: var(--background-color);

  color: var(--text-color);

}

Ora, aggiungiamo lo script per cambiare tema:

function switchToDarkMode() {

  document.documentElement.style.setProperty('--background-color', '#333333');

  document.documentElement.style.setProperty('--text-color', '#ffffff');

}

function switchToLightMode() {

  document.documentElement.style.setProperty('--background-color', '#ffffff');

  document.documentElement.style.setProperty('--text-color', '#333333');

}

// Esempio di utilizzo: alterna tema al clic di un pulsante

document.getElementById('theme-toggle').addEventListener('click', () => {

  const currentBackgroundColor = getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim();

    if (currentBackgroundColor === '#ffffff') {

      switchToDarkMode();

    } else {

      switchToLightMode();

    }

});

Questo esempio consente di cambiare tema al clic su un pulsante, alternando tra due set di variabili CSS.

La manipolazione dinamica delle variabili CSS offre una potente soluzione per creare interfacce interattive e adattabili. Combinando CSS e JavaScript, puoi modificare facilmente stili e temi al volo, garantendo un'esperienza utente ricca e personalizzata. Le possibilità sono infinite, e con una conoscenza di base delle variabili CSS e JavaScript, si possono realizzare soluzioni uniche per migliorare l'interattività del sito.

Best Practices e organizzazione del codice

Organizzazione delle variabili in sezioni logiche

Dividere le variabili CSS in categorie logiche semplifica la gestione del codice, soprattutto nei progetti di grandi dimensioni. Alcune categorie comuni possono includere le seguenti.

• Colori (--primary-color, --secondary-color, --accent-color)
• Tipografia (--font-size-base, --font-family, --font-weight-bold)
• Spaziature (--spacing-small, --spacing-medium, --spacing-large)
• Dimensioni (--container-width, --max-width)

Definire le variabili in :root per la massima accessibilità

Le variabili definite in :root sono accessibili ovunque nel documento, il che le rende ideali per valori globali come colori primari, tipografia e spaziature generali. In questo modo, anche componenti distanti nel DOM possono utilizzare le variabili senza doverle ridefinire.

Utilizzare nomi chiari e descrittivi

Nomi di variabili chiari e descrittivi migliorano la leggibilità e riducono il rischio di confusione durante lo sviluppo e la manutenzione. Evita abbreviazioni ambigue o nomi troppo generici.

Creare temi flessibili con le variabili

Se il progetto prevede più temi (ad esempio, modalità chiara e scura), le variabili CSS possono essere usate per definire i temi in modo semplice. Una pratica comune è definire set di variabili per ciascun tema e applicarli tramite classi o media query.

Usare valori di fallback nelle variabili

Per evitare problemi quando una variabile non è disponibile, conviene specificare un valore di fallback con la funzione var(). Questo garantisce che gli stili abbiano sempre un valore da applicare, anche se la variabile non è definita o è assente.

Limitare l'uso delle variabili locali

Definire variabili locali (ovvero all'interno di selettori specifici) può creare confusione, soprattutto se si sovrascrivono variabili globali con nomi simili. Utilizza variabili locali solo quando strettamente necessario, come per componenti o sezioni che richiedono valori specifici non riutilizzati altrove.

Documentare le variabili CSS

Documentare il significato e l'uso delle variabili CSS nel codice può risultare molto utile, soprattutto in progetti condivisi con altri sviluppatori.

Evitare di definire troppe variabili globali

Sebbene sia comodo centralizzare le variabili, conviene evitare di definire troppe variabili globali se non sono realmente utili al progetto. È meglio focalizzarsi su variabili che vengono utilizzate frequentemente e che contribuiscono alla coerenza del design.

Usare i CSS Custom Properties come configurazione per componenti riutilizzabili

Le variabili CSS possono essere particolarmente utili quando si sviluppano componenti riutilizzabili. Invece di definire stili rigidi all'interno dei componenti, è possibile usare variabili CSS per configurare colori, dimensioni e altri parametri direttamente dal foglio di stile principale.

Adottare un design system o set di variabili coerente

Avere un design system o una guida di stile che definisce un set coerente di variabili CSS per tutto il progetto aiuta a mantenere l'uniformità visiva e a migliorare la collaborazione nel team. Questo approccio centralizza le decisioni di design e riduce il rischio di inconsistenze.

Compatibilità dei browser e fallback

Le variabili CSS offrono flessibilità e controllo sugli stili, ma è importante considerare la compatibilità con i browser, soprattutto quando si lavora su progetti che devono supportare versioni più datate o browser con supporto limitato. Fortunatamente, oggi la maggior parte dei browser moderni supporta le variabili CSS, ma esistono ancora situazioni in cui è necessario implementare soluzioni di fallback per garantire la coerenza dello stile.

Supporto dei browser per le variabili CSS

• Chrome (dalla versione 49)
• Firefox (dalla versione 31)
• Safari (dalla versione 9.1)
• Edge (dalla versione 15)
• Opera (dalla versione 36)

Alcune versioni di Internet Explorer non supportano le variabili CSS, e quindi richiedono un fallback se è necessario garantire compatibilità con questi ambienti.

Fallback per browser non supportati (come IE)

Per browser come Internet Explorer che non supportano le variabili CSS, è possibile utilizzare CSS tradizionale come fallback. Il trucco consiste nel dichiarare prima le proprietà con valori fissi e successivamente ridefinirle usando le variabili CSS, in modo che i browser che supportano le variabili applichino i nuovi valori e ignorino i precedenti.

Conclusione

Le variabili CSS rappresentano un notevole passo avanti nella scrittura di CSS più efficiente, flessibile e modulare. Grazie alla loro capacità di gestire valori dinamici e di semplificare la gestione di stili complessi, le variabili CSS si sono affermate come un potente strumento per gli sviluppatori moderni. Integrando le variabili all'interno dei propri progetti, è possibile migliorare la coerenza del design, facilitare il mantenimento e rendere il codice più leggibile e gestibile.

Abbiamo visto come definire e utilizzare le variabili CSS, come funziona l'ereditarietà e la specificità, e come manipolare dinamicamente le variabili per creare effetti interattivi. Abbiamo anche esplorato le best practices per una gestione ordinata del codice e alcune soluzioni di fallback per garantire la compatibilità anche sui browser meno recenti.

In conclusione, l'adozione delle variabili CSS nei progetti è una scelta che migliora l'efficienza, riduce la possibilità di errori e permette di aggiornare gli stili con facilità. Continuando a esplorare le potenzialità di queste variabili e mantenendo un approccio organizzato, i progetti CSS possono essere più moderni, accessibili e sostenibili nel lungo termine.

Le variabili CSS sono destinate a rimanere una parte fondamentale del CSS e con l'evoluzione continua del web, è probabile che in futuro si arricchiranno di funzionalità sempre più avanzate. Spero che questa guida ti abbia fornito le basi per sfruttarle al meglio nei tuoi progetti!