Cosa sono le proprietà personalizzate CSS (variabili)?

Question

IT Interview Practice · Accepted Answer

**Le proprietà personalizzate CSS** (variabili) permettono di archiviare valori una volta e riutilizzarli. A differenza delle variabili del preprocessore (Sass), sono **attive a runtime** — si propagano, ereditano e possono essere modificate con JavaScript o media query.

```css
:root {                 /* :root = the html element → global scope */
  --color-primary: #3b82f6;
  --spacing: 1rem;
  --radius: 8px;
}

.button {
  background: var(--color-primary);   /* use with var() */
  padding: var(--spacing);
  border-radius: var(--radius);
}
```

## Valori di fallback

```css
color: var(--text-color, black); /* use black if --text-color isn't defined */
```

## Si propagano e possono essere scoperti/sovrascritti

```css
.card { --padding: 1rem; }
.card.compact { --padding: 0.5rem; } /* override locally — children using var() update */
```

Poiché ereditano, una variabile impostata su un elemento genitore è disponibile per tutti i discendenti e può essere sovrascritta su un sottoalbero — qualcosa che le variabili Sass (che vengono compilate) non possono fare.

## La funzionalità decisiva: theming a runtime

```css
:root { --bg: white; --text: black; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; } /* redefine the SAME vars for dark mode */
}
body { background: var(--bg); color: var(--text); }
```

Cambia un intero tema ridefinendo una manciata di variabili — nessuna regola duplicata. Puoi farlo anche in JS:

```js
document.documentElement.style.setProperty("--color-primary", "#e11d48");
```

Ciò aggiorna istantaneamente ogni elemento che utilizza quella variabile — impossibile con le variabili Sass compilate.

## Perché è importante

Le variabili CSS sono il fondamento del **theming moderno e dei design token**: definisci colori/spaziature una volta, riutilizzali ovunque e cambia i temi (dark mode, varianti di brand) a runtime tramite media query o JavaScript.

Portano valori DRY e dinamici al CSS semplice — nessun step di build richiesto.

Valori di fallback

Si propagano e possono essere scoperti/sovrascritti

La funzionalità decisiva: theming a runtime

Perché è importante

Domande correlate