Cara Menggunakan CSS Variable (Custom Properties)

CSS Variable, atau yang secara resmi disebut CSS Custom Properties, adalah fitur CSS modern yang memungkinkan kamu menyimpan nilai tertentu di dalam variabel dan menggunakannya berulang kali di seluruh stylesheet. Fitur ini membuat kode CSS lebih mudah dikelola, konsisten, dan mendukung fitur seperti theming dan dark mode. Artikel ini akan membahas cara menggunakannya dari dasar.

Apa Itu CSS Variable?

CSS Variable adalah nilai yang kamu definisikan sekali dan bisa digunakan berulang kali. Jika kamu ingin mengubah warna utama website, cukup ubah satu nilai saja — semua elemen yang menggunakan variabel tersebut akan ikut berubah secara otomatis.

Cara Mendefinisikan CSS Variable

CSS Variable didefinisikan dengan diawali dua tanda hubung (--). Biasanya ditempatkan di dalam selektor :root agar tersedia secara global:

:root {
  --warna-utama: #3b82f6;
  --warna-sekunder: #10b981;
  --warna-teks: #1e293b;
  --warna-latar: #f8fafc;
  --ukuran-font-dasar: 16px;
  --radius-border: 8px;
  --bayangan: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Cara Menggunakan CSS Variable

Gunakan fungsi var() untuk mengakses nilai variabel:

body {
  background-color: var(--warna-latar);
  color: var(--warna-teks);
  font-size: var(--ukuran-font-dasar);
}

.tombol {
  background-color: var(--warna-utama);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-border);
  cursor: pointer;
  box-shadow: var(--bayangan);
}

.tombol-sukses {
  background-color: var(--warna-sekunder);
  color: white;
  padding: 10px 20px;
  border-radius: var(--radius-border);
}

Nilai Fallback (Cadangan)

Kamu bisa memberikan nilai cadangan jika variabel tidak terdefinisi:

.elemen {
  color: var(--warna-khusus, #333333);
  /* Jika --warna-khusus tidak ada, gunakan #333333 */
}

CSS Variable Bersifat Cascading

CSS Variable mengikuti aturan cascade dan inheritance CSS. Kamu bisa mendefinisikan ulang variabel pada selektor tertentu untuk nilai yang berbeda:

:root {
  --warna-bg-kartu: #ffffff;
}

.kartu-gelap {
  --warna-bg-kartu: #1e293b;
}

.kartu {
  background-color: var(--warna-bg-kartu); /* berbeda tergantung parent */
  padding: 20px;
  border-radius: 8px;
}

<!-- Kartu putih -->
<div class="kartu">Kartu biasa</div>

<!-- Kartu gelap -->
<div class="kartu-gelap">
  <div class="kartu">Kartu di dalam div gelap</div>
</div>

Contoh Praktis: Sistem Warna Konsisten

:root {
  --biru-100: #dbeafe;
  --biru-500: #3b82f6;
  --biru-700: #1d4ed8;
  --abu-100: #f1f5f9;
  --abu-800: #1e293b;
}

.header {
  background: var(--biru-700);
  color: white;
}

.tombol-primer {
  background: var(--biru-500);
  color: white;
}

.tombol-primer:hover {
  background: var(--biru-700);
}

.latar-halus {
  background: var(--abu-100);
}

.teks-gelap {
  color: var(--abu-800);
}

Contoh: Mengubah Tema dengan CSS Variable

CSS Variable sangat mudah dikombinasikan dengan JavaScript untuk membuat tema dinamis:

<!-- HTML -->
<button onclick="gantiTema()">Ganti Tema</button>
<div class="kotak">Kotak ini akan berubah warna</div>

<style>
:root {
  --bg: #ffffff;
  --teks: #000000;
}

.kotak {
  background: var(--bg);
  color: var(--teks);
  padding: 20px;
  transition: all 0.3s ease;
}
</style>

<script>
function gantiTema() {
  const root = document.documentElement;
  const bg = getComputedStyle(root).getPropertyValue('--bg').trim();
  if (bg === '#ffffff') {
    root.style.setProperty('--bg', '#1e293b');
    root.style.setProperty('--teks', '#ffffff');
  } else {
    root.style.setProperty('--bg', '#ffffff');
    root.style.setProperty('--teks', '#000000');
  }
}
</script>

Tips Menggunakan CSS Variable

• Kelompokkan variabel berdasarkan kategori: warna, tipografi, spasi, shadow, dll.
• Gunakan penamaan yang deskriptif seperti --warna-utama bukan --c1.
• CSS Variable lebih unggul dari preprocessor seperti Sass karena bisa diubah saat runtime melalui JavaScript.
• Pastikan ada nilai fallback untuk browser lama yang belum mendukung CSS Variable (meskipun saat ini hampir semua browser modern sudah mendukungnya).

Kesimpulan

CSS Variable adalah fitur yang sangat berguna untuk membuat kode CSS yang lebih terstruktur, mudah dipelihara, dan mendukung fitur dinamis seperti theming. Dengan mendefinisikan variabel di :root dan menggunakannya dengan var(), kamu bisa mengubah tampilan seluruh website hanya dengan mengedit beberapa baris kode. Mulai terapkan CSS Variable di proyek kamu sekarang untuk kode yang lebih bersih dan profesional.