Variabel CSS (Custom Properties)

Satu sumber kebenaran

Capek ganti warna primer di 50 tempat saat rebranding? Custom properties (variabel CSS) menyimpan nilai di satu tempat dan dipakai di mana-mana.

:root {
  --warna-primer: #8b5cf6;
  --warna-teks: #1e293b;
  --radius: 12px;
  --spasi: 16px;
}

.tombol {
  background: var(--warna-primer);
  border-radius: var(--radius);
  padding: var(--spasi);
}

:root = elemen <html>, tempat konvensional menaruh variabel global. Pakai dengan fungsi var().

Nilai cadangan (fallback)

.kartu {
  background: var(--warna-kartu, #ffffff);
}

Kalau --warna-kartu tidak terdefinisi, pakai putih. Berguna buat komponen yang dipakai di banyak konteks.

Scoping: variabel per komponen

Variabel mengikuti aturan cascade dan inheritance biasa, jadi bisa ditimpa di scope lebih kecil:

:root {
  --warna-primer: #8b5cf6;
}

.alert-danger {
  --warna-primer: #ef4444; /* hanya di dalam alert ini */
}

.alert-danger .tombol {
  background: var(--warna-primer); /* merah, bukan ungu */
}

Ini powerful: satu komponen, banyak tema, tanpa duplikasi kode.

Dark mode tanpa JavaScript

:root {
  --bg: #ffffff;
  --teks: #1e293b;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --teks: #f1f5f9;
  }
}

body {
  background: var(--bg);
  color: var(--teks);
}

Seluruh tema berganti hanya dengan menimpa variabel. Bandingkan dengan cara lama yang harus menulis ulang setiap selektor.

Diubah dari JavaScript

Variabel CSS bisa dibaca dan ditulis lewat JS, jembatan antara CSS dan logika:

// ganti tema saat tombol diklik
document.documentElement.style.setProperty("--warna-primer", "#d946ef");

// baca nilai saat ini
const warna = getComputedStyle(document.documentElement)
  .getPropertyValue("--warna-primer");

Pola ini dipakai theme switcher di banyak website modern.

Catatan teknis: variabel CSS tidak bisa dipakai di media query (@media (min-width: var(--bp)) tidak valid) karena media query dievaluasi sebelum cascade berjalan. Untuk breakpoint, tetap pakai angka langsung atau preprocessor. Ini keterbatasan yang sering mengejutkan pemula.

Rangkuman

Definisikan di :root, pakai dengan var(), beri fallback, manfaatkan scoping buat tema per komponen, dan timpa variabel buat dark mode. Variabel CSS adalah fondasi sistem desain modern yang rapi.