CSS Variables adalah fitur modern pada CSS yang memungkinkan kalian menyimpan nilai seperti warna, ukuran font, maupun jarak dalam bentuk variabel agar mudah digunakan kembali di seluruh stylesheet.
Halo teman-teman, semoga kalian selalu semangat belajar web development karena skill ini sangat berguna untuk membuat tampilan website yang rapi dan konsisten. Pada artikel ini kodelyly.com akan membahas CSS Variables mulai dari pengertian, cara kerja, hingga contoh penggunaannya di proyek nyata agar kalian makin paham dan siap memakainya sendiri.
CSS Variables
CSS Variables, yang juga dikenal sebagai CSS custom properties, adalah cara untuk menyimpan nilai dalam sebuah nama variabel sehingga bisa dipanggil kembali dengan mudah menggunakan fungsi var(). Kurang lebih mirip seperti variabel di bahasa pemrograman, hanya saja digunakan khusus di dalam CSS.
Secara umum, penulisan CSS Variables adalah sebagai berikut:
:root {
--primary-color: #6c5ce7;
--secondary-color: #00cec9;
--radius-large: 16px;
}
button {
background-color: var(--primary-color);
border-radius: var(--radius-large);
}
Selector :root biasanya dipakai untuk mendefinisikan variabel global, sehingga semua elemen di halaman bisa memakai nilai tersebut. Nama variabel selalu diawali dengan dua tanda minus, contohnya --primary-color.
Cara Kerja CSS Variables
CSS Variables bekerja dengan konsep scope. Jika kalian mendefinisikan variabel di :root, maka variabel tersebut bisa dipakai di seluruh dokumen. Namun jika variabel didefinisikan di dalam selector tertentu, maka hanya elemen dalam scope itu yang dapat menggunakannya.
Contoh sederhana scope CSS Variables:
:root {
--text-color: #ffffff;
}
body {
background-color: #111111;
color: var(--text-color);
}
.card-tema-terang {
--text-color: #222222;
background-color: #f5f5f5;
color: var(--text-color);
}
Pada contoh di atas, body menggunakan --text-color berwarna putih. Namun di dalam .card-tema-terang, variabel --text-color didefinisikan ulang sehingga teks di dalam kartu tersebut berubah menjadi warna gelap tanpa mengubah warna teks di bagian lain.
Contoh Penggunaan CSS Variables
Berikut contoh lengkap penggunaan CSS Variables untuk membuat tema sederhana ala kodelyly.com.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh CSS Variables Kodelyly</title>
<style>
:root {
--bg-body: #050816;
--accent: #8e44ff;
--accent-soft: #2d1b4b;
--text-main: #f5f5f5;
--radius-card: 18px;
--spacing: 16px;
}
body {
margin: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background-color: var(--bg-body);
color: var(--text-main);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.card {
background: var(--accent-soft);
padding: calc(var(--spacing) * 2);
border-radius: var(--radius-card);
max-width: 420px;
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}
.card h1 {
margin-top: 0;
margin-bottom: var(--spacing);
font-size: 1.6rem;
color: var(--accent);
}
.card p {
margin-bottom: var(--spacing);
line-height: 1.6;
}
.btn-kodelyly {
display: inline-block;
padding: 10px 22px;
border-radius: 999px;
background: var(--accent);
color: var(--text-main);
border: none;
cursor: pointer;
font-weight: 600;
}
.btn-kodelyly:hover {
filter: brightness(1.1);
}
</style>
</head>
<body>
<div class="card">
<h1>Tema Kodelyly dengan CSS Variables</h1>
<p>Contoh ini memakai variabel untuk warna, jarak, dan radius agar styling lebih konsisten.</p>
<button class="btn-kodelyly">Coba Klik</button>
</div>
</body>
</html>
Dengan CSS Variables, jika kalian ingin mengganti seluruh warna tema, kalian cukup mengubah nilai pada bagian :root tanpa harus mencari setiap deklarasi warna satu per satu di seluruh stylesheet.
Kelebihan CSS Variables Dalam Project Web
CSS Variables memberikan berbagai keuntungan yang sangat terasa ketika proyek sudah mulai membesar. Beberapa kelebihan utamanya dapat dirangkum pada tabel berikut.
| Fitur | Penjelasan |
|---|---|
| Konsistensi desain | Satu variabel untuk satu nilai, sehingga tampilan lebih konsisten. |
| Mudah dikelola | Ganti nilai di satu tempat, efeknya langsung ke seluruh stylesheet. |
| Dinamis | Bisa digabung dengan JavaScript untuk membuat fitur dark mode dan tema. |
| Reusable | Variabel dapat dipakai di banyak komponen tanpa duplikasi kode. |
Kelebihan ini membuat CSS Variables sangat cocok dipakai di desain sistem, tema website, maupun komponen UI modern yang ingin tetap rapi meski jumlah halamannya banyak.
Kesimpulan
CSS Variables adalah fitur powerful di CSS yang membantu kalian menyimpan nilai styling dalam bentuk variabel agar lebih mudah dipakai ulang, dikelola, dan diubah secara global. Dengan memahami cara kerja scope, penulisan sintaks, serta contoh penerapan seperti pada kartu tema kodelyly.com di atas, kalian bisa membuat stylesheet yang lebih rapi dan profesional.
Sekian artikel dari kodelyly.com, semoga penjelasan tentang CSS Variables ini bermanfaat dan membantu kalian membangun tampilan website yang modern dan konsisten. Sampai jumpa di artikel berikutnya.