CSS Variables: Efisiensi Mengatur Skema Warna Global
Dahulu, jika Anda ingin mengubah warna biru utama di seluruh website, Anda harus mencari dan mengganti kode HEX satu per satu. Dengan CSS Variables, Anda cukup mengubahnya di satu lokasi sentral.
1. Deklarasi di :root
Variabel biasanya dideklarasikan di dalam :root. :root adalah pseudo-class yang merepresentasikan elemen paling atas dalam dokumen (biasanya ). Dengan menaruhnya di sini, variabel tersebut dapat diakses oleh semua elemen di website Anda.
Sintaks: Nama variabel harus diawali dengan dua tanda hubung (--).
:root { --primary-color: #3498db; --secondary-color: #2ecc71; --text-dark: #2c3e50; --spacing-main: 20px;
}
2. Menggunakan Fungsi var()
Untuk menerapkan nilai variabel pada sebuah properti, Anda menggunakan fungsi var().
h1 { color: var(--primary-color); margin-bottom: var(--spacing-main);
} .button { background-color: var(--primary-color); padding: 10px var(--spacing-main);
}
3. Keuntungan Utama CSS Variables
-
Maintenance Cepat: Ingin mengubah tema dari biru ke merah? Cukup ubah nilai di
:root. -
Reusability: Mengurangi pengulangan kode HEX yang sulit dihafal.
-
Dinamis: Variabel CSS dapat diubah menggunakan JavaScript secara real-time (berbeda dengan variabel SASS/LESS yang harus di-compile terlebih dahulu).
Tutorial: Implementasi Skema Warna Global
Mari kita buat struktur dasar untuk portal berita SatuMedia agar memiliki sistem warna yang teratur.
Struktur CSS (Global Styles)
/* 1. Pengaturan Variabel */
:root { --brand-blue: #004a99; --brand-light-blue: #3498db; --accent-orange: #f39c12; --bg-light: #f8f9fa; --card-shadow: 0 4px 6px rgba(0,0,0,0.1);
} /* 2. Implementasi */
body { background-color: var(--bg-light); font-family: 'Inter', sans-serif;
} .navbar { background-color: var(--brand-blue); color: white;
} .article-card { background: white; box-shadow: var(--card-shadow); border-left: 5px solid var(--brand-light-blue);
} .btn-cta { background-color: var(--accent-orange); color: white; border: none; padding: 10px 20px;
}
4. Teknik Lanjutan: Persiapan Dark Mode
Anda bisa menimpa nilai variabel di dalam class tertentu atau media query untuk menciptakan mode gelap dengan sangat mudah.
/* Saat user mengaktifkan dark mode */
body.dark-theme { --bg-light: #1a1a1a; --text-dark: #ffffff; --card-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
Tips Pro untuk Developer
-
Fallback Value: Anda bisa memberikan nilai cadangan jika variabel belum terdefinisi:
color: var(--primary-color, blue);. -
Naming Convention: Gunakan nama yang deskriptif berdasarkan fungsinya, bukan warnanya. Contoh:
--link-colorlebih baik daripada--blue-color, karena jika nanti link berubah jadi merah, nama variabelnya tetap relevan. -
Integrasi Framework: Jika Anda menggunakan Laravel dengan Tailwind atau Bootstrap, variabel CSS ini tetap sangat berguna untuk kustomisasi komponen inline tanpa harus sering menulis ulang class utility.
