Cosa sono le variabili in CSS

Pubblicato da

  


Le variabili in CSS sono uno strumento potente che permette di scrivere fogli di stile più chiari, riutilizzabili e facili da mantenere. Introdotte nelle specifiche CSS3, le variabili possono contenere qualsiasi valore CSS (colori, dimensioni, margini, ecc.) e possono essere riutilizzate in tutto il foglio di stile.

In questo articolo, vedremo:

  • Cosa sono le variabili
  • Come si dichiarano
  • Come si usano
  • Esempi pratici
  • Vantaggi e buone pratiche
🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

✅ Cosa sono le variabili

Le variabili sono proprietà CSS che iniziano con -- e si dichiarano all’interno di un selettore, solitamente :root per renderle globali.

Sintassi Base

:root {
  --primary-color: #3498db;
  --font-size-large: 1.5rem;
}

In questo esempio:

  • --primary-color contiene un colore
  • --font-size-large contiene una dimensione di font

🛠️ Come si usano

Per utilizzare una variabile, si usa la funzione CSS var().

h1 {
  color: var(--primary-color);
  font-size: var(--font-size-large);
}

🎯 Perché usare le variabili

  • Riutilizzo: Definisci una volta, usi ovunque.
  • Manutenzione: Cambiare un valore in un solo punto ha effetto su tutto il sito.
  • Temi: Perfette per cambiare facilmente lo stile dell’interfaccia (es. modalità chiara/scura).
  • Organizzazione: Migliora la leggibilità e struttura del CSS.

🔁 Esempio semplice (per comprendere le basi)

:root {
  --main-bg: #ffffff;
  --main-text: #333333;
  --accent: #ff6b6b;
  --padding: 1rem;
}

body {
  background-color: var(--main-bg);
  color: var(--main-text);
  padding: var(--padding);
}

button {
  background-color: var(--accent);
  color: var(--main-bg);
  padding: calc(var(--padding) / 2);
}

💡 Esempio avanzato (per sfruttare il riuso)

In questo esempio, vediamo come usare le variabili CSS per centralizzare colori, spaziature e tipografia, migliorando la manutenibilità e coerenza del design.

🎨 1. Dichiarazione delle variabili globali

:root {
  --primary-color: #4CAF50;
  --secondary-color: #ffffff;
  --font-family-base: 'Segoe UI', sans-serif;
  --font-size-base: 16px;
  --spacing-unit: 1rem;
  --border-radius: 8px;
}

🧱 2. Uso delle variabili nel layout generale

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  padding: var(--spacing-unit);
  background-color: var(--secondary-color);
  color: var(--primary-color);
}

🔘 3. Stile dei pulsanti con variabili

.button {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
}

🏷️ 4. Titoli coerenti con il tema

h1, h2, h3 {
  font-family: var(--font-family-base);
  color: var(--primary-color);
  margin-bottom: var(--spacing-unit);
}

🎯 5. Vantaggi pratici

  • Un solo punto di controllo per colori, spaziature e font
  • Codice più pulito e leggibile
  • Facilità di aggiornamento: cambi una variabile, e l’intero sito si aggiorna

💡 Le variabili CSS sono ideali per creare temi coerenti, rendere il design scalabile e migliorare la manutenzione del progetto.

 

⚠️ Fallback (valore di riserva)

Se la variabile non è definita, puoi specificare un valore di fallback:

color: var(--link-color, blue);

In questo caso, se --link-color non è stata definita, verrà usato blue.


💡 Buone Pratiche

  • Usa :root per dichiarazioni globali.
    • :root {
  --font-base: 16px;
  --line-height: 1.6;
  --spacing-unit: 1rem;
  --border-radius: 8px;
}
    body {
  font-size: var(--font-base);
  line-height: var(--line-height);
  padding: var(--spacing-unit);
}

.card {
  border-radius: var(--border-radius);
}
  • Organizza le variabili per tipo (colori, spaziature, tipografia…).
  • Commenta le variabili se necessario, per maggiore chiarezza.
  • Evita l’overuse: non creare variabili inutili o che usi solo una volta.

👀 Compatibilità Browser

Le variabili sono supportate dalla maggior parte dei browser moderni, inclusi:

  • Chrome
  • Firefox
  • Safari
  • Edge

🧩 Conclusione

Le variabili rendono il CSS molto più potente e flessibile. Usandole correttamente, puoi migliorare l’efficienza del tuo sviluppo front-end e semplificare la gestione dei tuoi stili.

Inizia da piccole variabili come colori e padding, e gradualmente estendi l'uso alle tipografie, animazioni e layout!



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment