Coba kamu lagi rebrand website dari biru ke hijau. Tanpa variable: cari-temuin 50 tempat warna biru di-hardcode di stylesheet, ubah satu-satu, pasti ada yang kelewat. Dengan CSS Variables: ubah satu baris di :root, semua tempat yang refer otomatis berubah. Kekuatan ini namanya single source of truth — satu sumber kebenaran, satu titik ubah, konsisten di mana-mana.

🤔 Plus dynamic. Beda dari preprocessor variable (Sass), CSS Variables hidup di runtime — bisa diubah lewat JavaScript on-the-fly. Toggle dark mode? Set --bg: black lewat JS, semua ikut berubah barengan. Gak perlu rebuild, gak perlu reload.

:root {
  --warna-utama: blue;
  --spacing: 16px;
}

h1 {
  color: var(--warna-utama);
  margin-bottom: var(--spacing);
}

.tombol {
  background: var(--warna-utama);
  padding: var(--spacing);
}

Aturan penulisan:

• Awali dengan -- (dua tanda hubung), akses pakai var(--nama)
• :root = variabel global (seluruh halaman)
• Bisa juga di selector spesifik = scoped (cuma di dalamnya)
• Fallback: var(--warna, black) — pakai black kalau --warna gak ada
• Live override via JS: el.style.setProperty("--warna-utama", "red")

🎭 Analogi sehari-hari

CSS Variables itu kayak saklar utama di rumah. Daripada ngubah satu-satu lampu kamar, dapur, ruang tamu, kamar mandi pas mau ganti suasana — kamu cukup puter satu knob di panel utama, semua lampu yang nyambung ke saklar itu langsung berubah barengan. Set --warna-utama: biru sekali di :root, semua tombol/heading/border yang refer ke variable itu otomatis biru. Besok bos bilang "ganti ke ungu", kamu cukup ubah satu baris — gak perlu cari-temuin 50 tempat di stylesheet.

⚠️ Jebakan yang sering ditemui

• Variable case-sensitive — --Color ≠ --color. Pakai konvensi konsisten.
• Cascade berlaku — variable di deeper selector menang. Override theme dengan set di parent yang lebih spesifik.
• var(--x, fallback) fallback cuma jalan kalau --x tidak terdefinisi — bukan kalau nilainya invalid.
• Variable bisa dipakai untuk SETIAP property — termasuk dalam calc(), di string, dll.
• Live updateable via JS — el.style.setProperty("--theme", "dark"). Powerful untuk theming.
• @property (newer) untuk type variable + bikin animasi smooth (default variable tidak bisa transition).
• Fallback for older browsers — pakai color: red; color: var(--brand-red); (browser ignored garis tidak dikenal).

TL;DR: CSS Variables = single source of truth buat warna/spacing/value yang dipake banyak tempat. Sintaks: --nama di :root (global) atau selector spesifik (scoped), akses via var(--nama, fallback). Beda dari Sass: hidup di runtime, bisa diubah via JS (el.style.setProperty()) — bagus buat theming/dark mode. Cascade berlaku (deeper selector menang), case-sensitive. Pakai @property kalau butuh animate variable.