Dalam pengembangan web modern, efisiensi dan konsistensi adalah kunci utama dalam menulis kode CSS. Bayangkan jika Anda memiliki sebuah proyek besar dengan ratusan file CSS, dan Anda ingin mengubah warna utama website — tentu akan memakan waktu lama jika harus mengganti satu per satu secara manual.
Nah, di sinilah CSS Variable (Custom Property) hadir sebagai solusi elegan. Dengan memanfaatkan fitur custom property CSS, Anda dapat mendefinisikan nilai-nilai yang dapat digunakan berulang kali di berbagai tempat dalam stylesheet Anda. Fitur ini memungkinkan Anda mengubah tampilan website hanya dengan mengedit satu baris kode.
Daftar isi
- Apa Itu CSS Variable (Custom Property)?
- Mengapa Harus Menggunakan CSS Variable?
- Struktur dan Penulisan CSS Variable
- Contoh Lengkap Penggunaan CSS Variable
- CSS Variable Scope dan Inheritance
- Menggunakan CSS Variable untuk Tema (Dark Mode / Light Mode)
- Mengubah CSS Variable Secara Dinamis dengan JavaScript
- CSS Variable dalam Component Design System
- Best Practice Menggunakan CSS Variable
- Performa CSS Variable
- Kesimpulan
Baca juga: Belajar CSS Transition Timing Function dan Easing
Apa Itu CSS Variable (Custom Property)?
CSS Variable atau sering disebut juga Custom Property CSS, adalah fitur modern yang memungkinkan kita mendefinisikan nilai dalam bentuk variabel yang dapat digunakan kembali di seluruh stylesheet.
Sintaks penulisan CSS variable adalah sebagai berikut:
:root {
--primary-color: #007BFF;
--secondary-color: #6C757D;
--font-size-base: 16px;
}Code language: CSS (css)Untuk menggunakan variabel tersebut, gunakan fungsi var() seperti in:
body {
color: var(--primary-color);
font-size: var(--font-size-base);
}Code language: CSS (css)Dengan pendekatan ini, ketika Anda ingin mengganti warna utama situs, cukup ubah nilai --primary-color di satu tempat saja.
Mengapa Harus Menggunakan CSS Variable?
Ada banyak keuntungan dari menggunakan CSS variable, antara lain:
Efisiensi Waktu dan Pemeliharaan
Perubahan gaya menjadi lebih cepat, cukup ubah satu variabel untuk memperbarui seluruh komponen.Konsistensi Desain
Warna, ukuran font, dan spasi yang seragam di seluruh website.Fleksibilitas Dinamis
Dapat diubah menggunakan JavaScript untuk menciptakan tema yang dinamis (seperti mode gelap dan terang).Mendukung Hierarki dan Scope
Anda dapat mengatur variabel dalam scope tertentu, baik global (:root) maupun lokal di elemen tertentu.
Struktur dan Penulisan CSS Variable
1. Pendefinisian di :root
Pseudo-class :root merepresentasikan elemen tertinggi dalam dokumen (biasanya <html>). Dengan mendefinisikan variabel di sini, maka variabel tersebut bersifat global.
:root {
--font-main: 'Poppins', sans-serif;
--main-bg: #f8f9fa;
--text-color: #212529;
}Code language: CSS (css)2. Penggunaan dengan var()
Untuk memanggil nilai variabel:
body {
background-color: var(--main-bg);
color: var(--text-color);
font-family: var(--font-main);
}Code language: CSS (css)3. Nilai Fallback (Cadangan)
CSS Variable juga mendukung nilai fallback jika variabel belum terdefinisi.
h1 {
color: var(--heading-color, #000);
}Code language: CSS (css)Contoh Lengkap Penggunaan CSS Variable
:root {
--primary: #0d6efd;
--secondary: #6c757d;
--success: #198754;
--danger: #dc3545;
--warning: #ffc107;
--info: #0dcaf0;
--light: #f8f9fa;
--dark: #212529;
}
body {
background-color: var(--light);
color: var(--dark);
font-family: 'Inter', sans-serif;
}
button {
background-color: var(--primary);
color: var(--light);
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
button:hover {
background-color: var(--success);
}Code language: CSS (css)Dengan hanya mengubah --primary di :root, semua elemen yang menggunakan warna utama tersebut akan otomatis ikut berubah.
CSS Variable Scope dan Inheritance
1. Scope Global vs Lokal
Variabel di :root bersifat global, sedangkan variabel yang dideklarasikan di dalam selector tertentu hanya berlaku untuk elemen itu dan turunannya.
:root {
--text-color: black;
}
.card {
--text-color: blue;
color: var(--text-color);
}
.alert {
color: var(--text-color);
}Code language: CSS (css)Hasilnya:
.cardmemiliki teks berwarna biru..alerttetap hitam, karena tidak mewarisi variabel dari.card.
2. Inheritance (Pewarisan)
Variabel CSS juga mengikuti sistem pewarisan. Jika suatu elemen tidak memiliki variabel tertentu, ia akan mencari ke atas hierarki DOM.
Menggunakan CSS Variable untuk Tema (Dark Mode / Light Mode)
Salah satu penggunaan paling populer dari CSS custom property adalah membuat tema warna dinamis.
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
[data-theme="dark"] {
--bg-color: #121212;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}Code language: CSS (css)Dengan JavaScript, Anda bisa mengubah tema dengan mudah:
const toggleTheme = () => {
document.body.dataset.theme =
document.body.dataset.theme === "dark" ? "light" : "dark";
};Code language: JavaScript (javascript)Mengubah CSS Variable Secara Dinamis dengan JavaScript
CSS variable juga dapat dimanipulasi langsung dari JavaScript untuk membuat efek interaktif.
document.documentElement.style.setProperty('--primary', '#ff5733');Code language: JavaScript (javascript)Kode di atas akan langsung mengubah nilai --primary pada seluruh dokumen.
CSS Variable dalam Component Design System
Dalam sistem desain modern seperti Tailwind, Bootstrap 5, atau framework custom, penggunaan CSS variable sudah menjadi praktik umum untuk mengatur warna, tipografi, dan spacing secara konsisten.
Contoh implementasi:
:root {
--spacing-sm: 4px;
--spacing-md: 8px;
--spacing-lg: 16px;
}
.card {
padding: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}Code language: CSS (css)Best Practice Menggunakan CSS Variable
- Gunakan prefix agar lebih mudah diidentifikasi.
Contoh:--clr-primary,--fs-base,--sp-md. - Simpan semua variabel global di satu file (misalnya variables.css).
- Gunakan struktur tematik (warna, ukuran, jarak, font).
- Hindari terlalu banyak variabel yang tidak diperlukan.
- Gunakan variabel untuk mendukung sistem dark/light mode, responsif, dan komponen modular.
Performa CSS Variable
CSS Variable diproses oleh browser secara efisien. Tidak seperti preprocessor (SASS/LESS), nilai variabel ini dihitung secara runtime, memungkinkan perubahan real-time melalui JavaScript tanpa perlu recompile.
Namun, perlu diingat:
- Terlalu banyak variabel yang diubah secara bersamaan bisa mempengaruhi rendering performance.
- Gunakan variabel hanya untuk properti yang memang sering berubah.
Kesimpulan
Belajar dan menerapkan CSS Variable (Custom Property) adalah langkah penting untuk menjadi front-end developer modern. Dengan memanfaatkan fitur ini, Anda akan mendapatkan kode yang lebih terorganisir, efisien, dan fleksibel untuk di-maintain.
Mulailah dengan mendefinisikan warna, font, dan spacing utama dalam satu tempat, kemudian gunakan di seluruh proyek. Anda akan segera merasakan kemudahan ketika proyek berkembang besar.
