Czym są CSS custom properties (zmienne)?

Question

Accepted Answer

**CSS custom properties** (zmienne) pozwalają przechowywać wartości raz i wielokrotnie ich używać. W przeciwieństwie do zmiennych preprocessora (Sass), są **aktywne w runtime** — kaskadują, dziedziczą i można je zmienić za pomocą JavaScript lub 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 */
```

## Kaskadują i można je zakreślić/przesłonić

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

Ponieważ dziedziczą, zmienna ustawiona na rodzicu jest dostępna dla wszystkich potomków i można ją przesłonić w poddrzewie — coś czego zmienne Sass (które są kompilowane) nie mogą zrobić.

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

Zmień całą motyw, redefiniując garść zmiennych — bez zduplikowanych reguł. Możesz to również zrobić w JS:

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

To natychmiast aktualizuje każdy element używający tej zmiennej — niemożliwe ze skompilowanymi zmiennymi Sass.

## Dlaczego to ważne

Zmienne CSS to fundament nowoczesnego **themingu i design tokenów**: zdefiniuj kolory/odległości raz, używaj wszędzie i przełączaj motywy (dark mode, warianty marek) w runtime za pomocą media queries lub JavaScript.

Niosą wartości DRY i dynamiczne do zwykłego CSS — bez kroku budowania.