CSS Variables Adalah: Custom Properties untuk Tema & Kode Rapi (Panduan Pemula)

CSS Variables adalah fitur CSS untuk menyimpan sebuah nilai sekali, lalu memakainya berulang kali di banyak tempat. Nama resminya custom properties. Kamu mendeklarasikan sebuah nama yang diawali dua tanda minus (--warna-utama), mengisinya dengan nilai, lalu memanggilnya lewat fungsi var(). Ubah nilainya di satu tempat, dan semua elemen yang memakainya ikut berubah, inilah “satu sumber kebenaran” untuk gaya di CSS.

Buat pemula, ini sering terasa membingungkan: kenapa harus dua minus? Di mana tempat terbaik menaruhnya? Apa bedanya dengan variabel $warna di SASS yang mungkin pernah kamu dengar? Panduan ini membahas semuanya berurutan, dari definisi, sintaks --nama dan var(), kenapa :root jadi tempat favorit, nilai fallback, sampai kekuatan sesungguhnya: mengganti tema (termasuk dark mode) dan mengubah variabel dari JavaScript. Semua contohnya bisa langsung kamu coba.

CSS Variables Adalah… (Definisi Custom Properties)

CSS Variables, atau custom properties, adalah properti CSS buatanmu sendiri yang namanya diawali --, berisi sebuah nilai yang bisa kamu pakai ulang lewat var(). Berbeda dengan properti CSS bawaan seperti color atau padding yang artinya sudah ditentukan browser, custom property tidak melakukan apa-apa sendiri, ia hanya wadah penyimpan nilai. Nilai itu baru “hidup” saat kamu memanggilnya di properti asli lewat var().

Analoginya seperti menyimpan nomor kontak di HP. Kamu simpan nomor sekali dengan nama “Ibu”, lalu setiap kali menelepon cukup pilih “Ibu”, tidak perlu hafal deretan angkanya. Kalau nomornya ganti, kamu update sekali di kontak, dan semua panggilan berikutnya otomatis benar. CSS Variables bekerja persis seperti itu untuk nilai gaya: warna brand, jarak standar, radius sudut, dan seterusnya.

Contoh paling dasar:

:root {
  --warna-brand: #f97316; /* simpan nilai sekali */
}

.tombol {
  background: var(--warna-brand); /* pakai di sini */
}
.tautan {
  color: var(--warna-brand);      /* ...dan di sini */
}

Kalau suatu hari warna brand berganti dari oranye ke biru, kamu cukup mengubah satu baris --warna-brand, dan tombol serta tautan langsung ikut berubah. Tanpa variabel, kamu harus mencari dan mengganti #f97316 di puluhan tempat, melelahkan dan gampang ada yang terlewat.

Sintaks CSS Variables: --nama dan var()

Ada dua bagian dalam sintaks CSS Variables: mendeklarasikan variabel dengan nama berawalan --, lalu memanggilnya dengan fungsi var(--nama). Keduanya wajib memakai tanda dua minus di depan nama, itulah yang membedakan custom property dari properti CSS biasa.

Bagian deklarasi, memberi nama dan nilai:

.kartu {
  --padding-kartu: 20px;   /* nama diawali --, lalu nilainya */
  --warna-judul: #1e293b;
}

Bagian pemakaian, memanggil nilai itu dengan var():

.kartu {
  padding: var(--padding-kartu);   /* jadi 20px */
}
.kartu h2 {
  color: var(--warna-judul);       /* jadi #1e293b */
}

Beberapa aturan penting soal penamaan:

• Nama wajib diawali dua tanda minus: --warna, bukan -warna atau warna.
• Nama bersifat case-sensitive, --Warna dan --warna dianggap dua variabel berbeda.
• Boleh berisi huruf, angka, tanda minus, dan garis bawah. Konvensi umum memakai kebab-case: --warna-teks-utama.

Sintaks :root {}, Tempat Terbaik Variabel Global

:root adalah selector yang menunjuk elemen paling atas dokumen (elemen html), dan menaruh variabel di sana membuatnya global, bisa diakses dari elemen mana pun di seluruh halaman. Ini karena CSS Variables mengikuti aturan pewarisan (inheritance): variabel yang dideklarasikan di sebuah elemen tersedia untuk elemen itu dan semua anak-anaknya. Karena :root adalah nenek moyang semua elemen, variabelnya menjangkau ke mana-mana.

:root {
  --warna-utama: #f97316;
  --warna-teks: #f8fafc;
  --radius: 12px;
  --jarak: 16px;
}

/* Semua ini bisa memakai variabel di atas, di mana pun letaknya */
.header { background: var(--warna-utama); }
.footer { padding: var(--jarak); }
.tombol { border-radius: var(--radius); }

Kamu juga boleh menaruh variabel di selector biasa (bukan :root) kalau ingin cakupannya lokal, hanya berlaku di dalam komponen tertentu. Tapi untuk nilai yang dipakai di banyak tempat, :root adalah rumahnya.

Paling enak dicoba langsung. Ubah satu variabel di bawah, dan perhatikan tombol, card, serta badge, ketiganya berubah bersamaan karena membaca sumber :root yang sama:

:root {
  --warna-utama: #f97316;
  --warna-teks: #f8fafc;
  --radius: 12px;
}

Nilai Fallback: var(--x, default)

Fungsi var() menerima argumen kedua sebagai nilai cadangan: var(--warna, blue) berarti “pakai --warna, tapi kalau variabel itu tidak ada, pakai blue”. Nilai fallback ini jadi jaring pengaman ketika sebuah variabel belum dideklarasikan atau salah ketik namanya.

.tombol {
  /* Kalau --warna-tombol tidak didefinisikan, tombol tetap biru, bukan transparan */
  background: var(--warna-tombol, #3b82f6);
}

CSS Variable vs Variabel SASS: Runtime vs Compile-Time

Perbedaan paling penting: CSS Variable hidup di runtime (di dalam browser, saat halaman berjalan) dan bisa berubah dinamis, sedangkan variabel SASS/preprocessor ($warna) hilang di compile-time, ia diganti nilai mentahnya sebelum CSS sampai ke browser. Keduanya sama-sama disebut “variabel”, tapi bekerja di dunia yang berbeda, dan inilah sumber kebingungan terbesar buat pemula.

Variabel SASS ditulis dengan $:

// SASS, $warna diproses lalu HILANG saat dikompilasi
$warna: #f97316;
.tombol { background: $warna; }

Setelah dikompilasi, browser hanya menerima background: #f97316, kata $warna sudah lenyap. Ia tidak bisa berubah lagi setelah halaman tampil. Sebaliknya, CSS Variable dengan -- tetap ada di browser, bisa berubah karena cascade, media query, hover, bahkan diubah dari JavaScript.

Berikut perbandingan lengkapnya:

Kekuatan Sesungguhnya: Cascade, Tema, dan Dark Mode

Karena CSS Variable mengikuti cascade dan bisa di-override, kamu bisa mengganti seluruh tema situs hanya dengan menimpa nilai variabel di kondisi tertentu, inilah cara kerja dark mode modern. Kamu mendefinisikan tema terang di :root, lalu menimpa variabel yang sama saat mode gelap aktif. Semua elemen yang memakai var() otomatis mengikuti, tanpa satu pun background atau color perlu ditulis ulang.

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

/* Saat pengguna memilih mode gelap, cukup timpa nilai variabelnya */
@media (prefers-color-scheme: dark) {
  :root {
    --warna-bg: #0f172a;
    --warna-teks: #f8fafc;
  }
}

body {
  background: var(--warna-bg); /* ikut berubah otomatis di dark mode */
  color: var(--warna-teks);
}

Perhatikan body tidak tahu-menahu soal terang atau gelap, ia hanya membaca var(--warna-bg). Yang berubah adalah nilai variabelnya, bukan tempat pemakaiannya. Inilah kenapa CSS Variables begitu ampuh untuk theming: satu sumber, banyak konsumen.

Karena variabel juga mengikuti cascade per elemen, kamu bisa membuat “tema lokal” hanya dengan menimpa variabel di sebuah kontainer:

.kartu-promo {
  --warna-utama: #ec4899; /* di dalam kartu ini, --warna-utama jadi pink */
}
/* Tombol di dalam .kartu-promo otomatis pink, di luar tetap oranye */

Mengubah Variabel dari JavaScript

Karena CSS Variable hidup di runtime, JavaScript bisa membaca dan mengubahnya secara langsung lewat element.style.setProperty(). Ini pintu masuk untuk tombol “ganti tema”, pengaturan warna dari pengguna, atau animasi berbasis nilai, sesuatu yang mustahil dilakukan variabel SASS.

// Ganti warna utama seluruh situs dari sebuah tombol
document.documentElement.style.setProperty('--warna-utama', '#8b5cf6')

document.documentElement adalah elemen html (sama dengan :root). Satu baris itu mengubah --warna-utama di level global, dan setiap elemen yang memakai var(--warna-utama) langsung berubah warna saat itu juga, persis seperti yang kamu lihat di playground interaktif di atas.

Cara Kerja Lengkapnya dalam Praktik

Ringkasnya, alur memakai CSS Variables selalu tiga langkah yang sama:

1. Deklarasikan nilai di :root dengan nama berawalan --.
2. Pakai lewat var(--nama) di properti mana pun yang butuh.
3. Ubah nilainya sekali (lewat cascade, media query, atau JavaScript) dan semua konsumen ikut berubah.

:root {
  --warna-utama: #f97316;
  --radius: 12px;
}

.tombol {
  background: var(--warna-utama);
  border-radius: var(--radius);
}
.badge {
  background: var(--warna-utama);   /* konsumen kedua, sumber sama */
  border-radius: var(--radius);
}

Ganti --warna-utama sekali, dan tombol serta badge berubah bersama, tidak ada nilai warna yang tersebar dan berisiko ketinggalan saat diganti. Konsep “satu sumber kebenaran” inilah yang membuat CSS Variables jadi fondasi design system dan theming di web modern.

FAQ Seputar CSS Variables

CSS Variables adalah apa?

CSS Variables (nama resminya custom properties) adalah properti CSS buatan sendiri yang namanya diawali dua tanda minus, misalnya --warna-utama, dan berisi sebuah nilai yang bisa dipakai ulang lewat fungsi var(). Fungsinya menyimpan nilai sekali lalu memakainya di banyak tempat, sehingga kalau nilainya berubah kamu cukup menggantinya di satu titik.

Apa bedanya CSS Variable dengan variabel SASS?

CSS Variable (--nama) hidup di runtime di dalam browser dan bisa berubah dinamis, lewat cascade, media query, hover, atau JavaScript. Variabel SASS ($nama) hilang di compile-time: ia diganti nilai mentahnya sebelum CSS sampai ke browser, jadi tidak bisa berubah lagi setelah halaman tampil. Singkatnya: $ hilang saat build, -- tetap hidup saat halaman berjalan.

Kenapa CSS Variable sebaiknya ditaruh di :root?

Karena :root menunjuk elemen paling atas dokumen (elemen html), dan CSS Variables diwariskan ke elemen anak. Variabel yang dideklarasikan di :root otomatis tersedia untuk setiap elemen di seluruh halaman, sehingga cocok untuk nilai global seperti warna brand, jarak, dan radius. Untuk nilai yang hanya dipakai di satu komponen, kamu boleh menaruhnya di selector lokal.

Apa fungsi nilai kedua pada var(--x, default)?

Nilai kedua adalah fallback (cadangan). var(--warna, blue) berarti “pakai --warna, tapi kalau variabel itu tidak terdefinisi, pakai blue”. Ini mencegah tampilan rusak ketika sebuah variabel belum ada atau namanya salah ketik.

Bisakah CSS Variable diubah lewat JavaScript?

Bisa. Karena CSS Variable hidup di runtime, JavaScript dapat mengubahnya dengan element.style.setProperty('--nama', 'nilai'). Contohnya document.documentElement.style.setProperty('--warna-utama', '#8b5cf6') mengganti warna utama di level global, dan semua elemen yang memakai var(--warna-utama) langsung ikut berubah. Ini yang menjadi dasar fitur ganti tema dan dark mode toggle.

Langkah Selanjutnya

Sekarang kamu sudah pegang intinya: CSS Variables adalah custom property berawalan --, dipanggil lewat var(), paling enak dideklarasikan di :root supaya global, punya nilai fallback sebagai jaring pengaman, dan, tidak seperti variabel SASS, hidup di runtime sehingga bisa berubah untuk theming, dark mode, hingga dikontrol dari JavaScript.

Seperti biasa, konsep baru melekat lewat praktik. Coba buat file kecil: taruh tiga variabel di :root (warna, teks, radius), pakai di beberapa elemen berbeda, lalu ganti satu variabelnya dan lihat semuanya berubah serempak. Kalau mau latihan terstruktur dengan feedback langsung dan editor di browser, lesson CSS Variables di Hyper Sheets membimbingmu langkah demi langkah sampai kamu lancar memakainya untuk tema dan design system. Selamat ngoding!