Ce sunt CSS custom properties (variabile)?

Question

Accepted Answer

**CSS custom properties** (variabile) te permit să stochezi valori o dată și să le reutilizezi. Spre deosebire de variabilele preprocessor (Sass), sunt **live la runtime** — cascadează, moștenesc și pot fi schimbate cu JavaScript sau media queries.

```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);
}
```

## Fallback values

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

## Se cascadează și pot fi cu domeniu/suprascrise

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

Pentru că moștenesc, o variabilă setată pe un părinte este disponibilă pentru toți descendenții și poate fi suprascrisă pe un subarbore — ceva ce variabilele Sass (care sunt compilate) nu pot face.

## Killer feature: runtime theming

```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); }
```

Schimbă o temă completă prin redefinirea unei mână de variabile — fără reguli duplicate. Poți face asta și în JS:

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

Aceasta actualizează instant orice element care folosește acea variabilă — imposibil cu variabilele Sass compilate.

## De ce este important

Variabilele CSS sunt fundamentul **temelor și design tokens** moderni: definește culori/spațiere o dată, reutilizează peste tot și schimbă teme (dark mode, variante de marcă) la runtime via media queries sau JavaScript.

Aduc valori DRY și dinamice la CSS simplu — niciun pas de construire necesar.