Variabel CSS: Membuat Kode CSS yang Lebih Efisien dan Cepat

Apa Itu Variabel dalam CSS?

Variabel CSS, atau disebut juga dengan CSS Custom Properties, adalah fitur modern dalam CSS yang memungkinkan kita menyimpan nilai-nilai tertentu (seperti warna, font-size, spacing, dll) di satu tempat, lalu menggunakan kembali nilai tersebut di seluruh kode CSS.

Contoh:

:root {
    --primary-color: #007bff;
    --font-stack: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

button {
    background-color: var(--primary-color);
    font-family: var(--font-stack);
}

Dengan variabel, kita bisa membuat kode lebih terstruktur, mudah dipelihara, dan konsisten secara visual.

---

1. Sintaks Dasar

Variabel CSS didefinisikan dengan tanda dua strip (--) di awal nama variabel:

--nama-variabel: nilai;

Untuk menggunakannya, gunakan fungsi var():

property: var(--nama-variabel);

Contoh:

:root {
    --warna-utama: #ff5722;
    --jarak-besar: 2rem;
}

.card {
    border: 2px solid var(--warna-utama);
    margin-bottom: var(--jarak-besar);
}

💡 Nama variabel bersifat case-sensitive: --warna, --Warna, dan --WARNA dianggap berbeda.

---

2. Mendefinisikan Variabel

Variabel dapat didefinisikan di mana saja, tetapi umumnya ditempatkan di :root agar tersedia global.

:root {
    --bg-color: #f9f9f9;
    --text-color: #333;
    --radius: 8px;
}

Anda juga bisa mendefinisikan variabel di selector lain untuk penggunaan lokal:

.card {
    --card-padding: 1rem;
    padding: var(--card-padding);
}

---

3. Keuntungan Menggunakan Variabel CSS

Menggunakan variabel CSS memberikan banyak keuntungan:

Mudah Dikelola

Ganti nilai sekali di satu tempat, dan semua elemen yang menggunakan variabel itu akan ikut berubah.

Meningkatkan Konsistensi Desain

Pastikan warna, ukuran font, spacing, dan lainnya tetap konsisten di seluruh website.

Mempermudah Pemeliharaan

Tim desain dan developer bisa bekerja lebih cepat dan terorganisir.

Dapat Digunakan Dinamis

Bisa diganti saat runtime menggunakan JavaScript jika dibutuhkan.

---

4. Contoh Penggunaan Praktis

a. Warna Tema Global

:root {
    --primary: #007bff;
    --success: #28a745;
    --danger: #dc3545;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-success {
    background-color: var(--success);
    color: white;
}

b. Spacing System

:root {
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
}

.card {
    padding: var(--spacing-md);
}

.header {
    margin-bottom: var(--spacing-lg);
}

c. Ukuran Font Responsif

:root {
    --font-base: 16px;
    --font-heading: calc(var(--font-base) * 1.5);
}

h1 {
    font-size: var(--font-heading);
}

p {
    font-size: var(--font-base);
}

---

5. Mengganti Nilai Variabel dengan Media Queries

Anda bisa mengganti nilai variabel berdasarkan kondisi tertentu seperti ukuran layar.

Contoh:

:root {
    --font-size: 16px;
}

@media screen and (max-width: 768px) {
    :root {
        --font-size: 14px;
    }
}

body {
    font-size: var(--font-size);
}

---

6. Mengganti Nilai Variabel dengan JavaScript

Karena variabel CSS adalah bagian dari DOM, nilainya bisa diubah melalui JavaScript.

Contoh:

document.documentElement.style.setProperty('--primary', '#e91e63');

Ini berguna untuk:

• Mode gelap/terang dinamis.
• Tema berbasis pengguna.
• UI builder interaktif.

---

7. Tips dan Trik Efektif

• Gunakan pendekatan sistematis seperti Design Tokens untuk nama variabel (misalnya --color-primary, --spacing-medium).
• Simpan semua variabel di bagian atas stylesheet agar mudah dikelola.
• Gunakan komentar untuk menjelaskan tujuan setiap variabel.
• Gabungkan dengan calc() untuk perhitungan dinamis.
• Uji perubahan variabel di browser developer tools untuk melihat efeknya secara langsung.

---

8. Contoh Template Struktur Variabel Lengkap

Berikut contoh struktur template variabel yang sering digunakan:

:root {
    /* Colors */
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;

    /* Fonts */
    --font-main: 'Open Sans', sans-serif;
    --font-heading: 'Roboto', sans-serif;

    /* Sizes */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;

    /* Spacing */
    --spacing: 1rem;
    --radius: 4px;
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Breakpoints */
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
}

---

Kesimpulan

Variabel CSS adalah alat yang sangat kuat untuk membuat kode CSS lebih modular, terstruktur, dan mudah dikelola. Dengan memanfaatkan --custom-property dan var(), Anda bisa menciptakan sistem desain yang fleksibel, responsif, dan mudah dikembangkan — baik untuk proyek pribadi maupun tim besar.

Selanjutnya, kita akan membahas Filter CSS, yaitu cara menambahkan efek visual pada gambar dan elemen dengan mudah.

---

💡 Tips Praktis

• Gunakan variabel untuk warna, font, spacing, radius, shadow, dll.
• Definisikan variabel di :root agar bisa diakses di seluruh stylesheet.
• Gunakan JavaScript hanya jika benar-benar perlu mengganti tema secara dinamis.
• Dokumentasikan variabel penting untuk kemudahan tim.