Custom properties (variabel CSS)

Simpan nilai yang bisa dipakai ulang di seluruh lembar gaya.

Pahami konsepnya

Custom properties — variabel CSS — dideklarasikan dengan dua garis di awal nama: --utama: teal. Tempat deklarasinya menentukan jangkauannya: pada :root ia global untuk seluruh dokumen; pada sebuah selektor ia lokal untuk elemen itu dan keturunannya. Pemakaiannya lewat fungsi var(): color: var(--utama), dengan cadangan opsional var(--utama, black) yang aktif bila variabelnya tak terdefinisi.

Kekuatan sejatinya baru terasa saat dipakai: ganti satu nilai di :root dan seluruh tombol, tautan, serta aksen di situs ikut berganti — palet, spacing, dan radius menjadi tuas-tuas yang bisa diputar tanpa menyentuh puluhan baris. Berbeda dari pra-prosesor lama (Sass/Less), variabel ini hidup di browser: bisa dibaca dan diubah dari JavaScript (element.style.setProperty), dan bisa berbeda per elemen.

Satu trik yang mengubah segalanya: mendeklarasikan ulang variabel di dalam media query atau kelas tertentu. :root { --bg: white } lalu .gelap { --bg: #1c2833 } — satu kelas toggle mengganti seluruh tema karena semua elemen membaca dari sumber yang sama. Begitulah mode gelap modern dibangun tanpa menulis ulang lembar gaya.

Coba contoh kode

:root {
  --utama: hsl(190, 60%, 40%);
  --bg: #f7f9fa;
  --teks: #243b46;
  --radius: 10px;
  --jarak: 16px;
}

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

.kartu {
  border-radius: var(--radius);
  padding: var(--jarak);
  background: var(--utama);
}

body.gelap {
  --bg: #16222b;
  --teks: #e8eef1;
}

Seluruh sistem warna dan bentuk situs ini hidup di lima variabel :root. body.gelap cukup menimpa dua variabel — latar dan teks — dan semua elemen yang membaca var() ikut berubah seketika, termasuk kartu yang warnanya tetap. Tambahkan tombol penerang JavaScript satu baris (classList.toggle) dan mode gelapmu selesai.

Latihan singkat

Rancang setidaknya enam variabel tema (warna, jarak, radius) untuk halamanmu, lalu buat kelas .gelap yang menimpanya dan tombol toggle mode gelap.