Scope e cascata delle variabili: :root, componenti, stati hover/focus

La caratteristica più utile delle variabili CSS (rispetto alle vecchie variabili Sass o Less) è che esistono nel DOM del browser e rispettano cascata ed ereditarietà.

Questo significa che puoi dichiarare una variabile e poi “sovrascriverne” il valore solo per uno specifico pezzo del tuo sito. Questo concetto si chiama Scope (Ambito di visibilità).

1. Lo Scope Globale (:root)

Come abbiamo visto, se dichiari una variabile nel :root, questa sarà visibile e utilizzabile da qualsiasi elemento della pagina.

:root {
  --colore-sfondo: white;
}

body {
  background-color: var(--colore-sfondo);
}

2. Lo Scope Locale (Component-level)

Cosa succede se definisci una variabile all’interno della classe di una Card specifica?

.card-dark {
  /* Questa variabile esiste SOLO dentro .card-dark e nei suoi figli */
  --colore-sfondo-card: #222222;
}

.card-titolo {
  background-color: var(--colore-sfondo-card); 
  /* Funziona se il titolo è dentro .card-dark! Se è fuori, non farà nulla. */
}

Questo è utilissimo per creare “Temi” circoscritti per specifici componenti.

3. Sovrascrittura dinamica

Immagina di avere 3 pulsanti: uno normale (blu), uno di successo (verde) e uno di pericolo (rosso). L’approccio vecchio prevedeva di riscrivere il background-color e il border-color in tre classi diverse. Con le variabili CSS, scrivi il CSS strutturale una sola volta, e poi sovrascrivi solo il valore della variabile!

/* STRUTTURA DEL BOTTONE */
.btn {
  /* Diamo un valore di default alla variabile, se non viene sovrascritta */
  --colore-btn: #007bff; 
  
  background-color: var(--colore-btn);
  border: 2px solid var(--colore-btn);
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
}

/* Varianti: invece di riscrivere il background, cambiamo solo la variabile. */
.btn.success {
  --colore-btn: #28a745; /* La cascata aggiorna background e border. */
}

.btn.danger {
  --colore-btn: #dc3545;
}

4. Variabili e Stati Interattivi (:hover)

Questo principio si applica bene anche alle interazioni. Vuoi che il pulsante diventi più scuro al passaggio del mouse?

.btn {
  --bg: blue;
  background-color: var(--bg);
}

.btn:hover {
  /* Quando il mouse è sopra, la variabile diventa blu scuro. 
     Il background-color si aggiorna di conseguenza. */
  --bg: darkblue; 
}

Capire che le variabili CSS possono essere modificate dai selettori o da JavaScript aiuta a progettare componenti più flessibili.

Esercizi

Base · facile

Definisci un bottone la cui variante «success» cambia colore senza riscrivere background-color e border, ma solo il valore di una variabile.

.btn { --colore-btn: #007bff; background-color: var(--colore-btn); border: 2px solid var(--colore-btn); }
.btn.success { --colore-btn: #28a745; }

Intermedio · medio

Crea una .card-dark che ridefinisce una variabile di sfondo solo per sé e i suoi figli (scope locale), e verifica che fuori da quella card la variabile non abbia effetto. Poi rendi un bottone più scuro al :hover cambiando solo la variabile.

Sfida · difficile

Spiega perché le custom property rispettano cascata ed ereditarietà a differenza delle variabili Sass/Less, e progetta un sistema di bottoni (default/success/danger) e stati hover basato interamente sulla sovrascrittura di una sola variabile. Indica un caso in cui modificarla via JavaScript è utile.