Apa saéé sifat custom CSS (variabel)?

Question

Accepted Answer

**Sifat custom CSS** (variabel) sadulur sampeyan nyimpan nilai sapisan lan nganggo manèh. Beda karo variabel preprocessor (Sass), éta **aktif ing runtime** — nyebar, diwarisi, lan bisa dibèrèh ganti karo JavaScript utawa 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);
}
```

## Nilai fallback

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

## Nyebar lan bisa diséket/ditindihké

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

Amarga diwarisi, variabel sing disetel ing parèn kaméndal kanggo kabèh turunané lan bisa ditindihké ing subpohon — seng variabel Sass (sing dikompilasi) ora bisa gawe.

## Fitur pembunuh: theming 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); }
```

Tukaran temaning bulat-bulat karo nèk-nèng ulang sawenèh variabel — tanpa aturan dubel. Sampeyan uga bisa gawe ing JS:

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

Ikatan nglakoni anyar kabèh elemen sing nganggo variabel èta — ora bisa karo variabel Sass sing dikompilasi.

## Mengapa penting

Variabel CSS yaiku fondasi **theming modern lan design tokens**: tetepaken warna/spasi sapisan, nganggo manèh ing samanéné, lan ganti tema (mode peteng, varian brand) ing runtime liwat media queries utawa JavaScript.

Nganggo nilai DRY lan dinamis menyang CSS lawas — ora perlu tahap build.