Series Mahir CSS #17 : CSS Custom Properties

Hai, selamat datang kembali! Kali ini kita akan belajar tentang CSS Custom Properties, atau yang lebih sering disebut dengan CSS Variables. Ini adalah fitur yang memungkinkan kamu untuk mendefinisikan nilai yang dapat digunakan berulang kali dalam kode CSS kamu. Penggunaan variabel CSS sangat berguna untuk mempermudah pengelolaan gaya, terutama jika kamu bekerja dengan banyak nilai yang sama (seperti warna, ukuran font, dan lainnya) di berbagai bagian situs.

Apa Itu CSS Custom Properties?

CSS Custom Properties adalah nilai yang bisa kamu definisikan di dalam CSS dan kemudian gunakan berulang kali di seluruh stylesheet kamu. Variabel CSS memungkinkan kamu untuk mengatur nilai-nilai seperti warna, ukuran, atau jarak, dan kemudian mengubahnya di satu tempat tanpa perlu mencari dan mengganti setiap instansi nilai tersebut di seluruh CSS.

Contoh dari penggunaan Custom Properties:

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
}

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

h1 {
    color: var(--secondary-color);
}

Di sini, kita mendefinisikan dua variabel CSS (--primary-color dan --secondary-color) di dalam selector :root, yang artinya variabel ini dapat diakses di seluruh dokumen. Lalu kita menggunakan variabel-variabel tersebut di dalam aturan CSS untuk body dan h1.

Bagaimana Cara Kerja CSS Custom Properties?

1. Menentukan Variabel CSS
   Untuk menentukan sebuah variabel CSS, kamu harus memberikan nama variabel diawali dengan tanda dua garis hubung (--). Variabel ini biasanya didefinisikan di selector :root agar dapat digunakan di seluruh dokumen CSS.

   Contoh:

   :root {
       --main-bg-color: #f0f0f0;
   }
   

2. Menggunakan Variabel CSS
   Setelah didefinisikan, kamu bisa menggunakan variabel CSS dengan menggunakan fungsi var(). Di dalam fungsi var(), kamu memanggil nama variabel yang ingin digunakan.

   Contoh:

   body {
       background-color: var(--main-bg-color);
   }
   

3. Fallback Value
   Dalam kasus jika variabel tidak terdefinisi atau tidak ditemukan, kamu bisa memberikan fallback value sebagai nilai cadangan. Ini berguna agar desain tetap berfungsi dengan baik meskipun variabel tersebut belum didefinisikan.

   Contoh:

   h2 {
       color: var(--headline-color, #333); /* Jika --headline-color tidak ada, gunakan #333 */
   }
   

Keuntungan Menggunakan CSS Custom Properties

1. Pengelolaan Gaya yang Lebih Mudah
   Dengan variabel CSS, kamu bisa mengubah satu nilai di satu tempat, dan secara otomatis semua tempat yang menggunakan variabel tersebut akan terupdate. Ini sangat menghemat waktu dan tenaga, terutama untuk proyek yang lebih besar.

2. Memudahkan Pemeliharaan Kode
   Variabel membantu menyusun dan memelihara kode CSS yang lebih bersih dan lebih terorganisir. Daripada menulis ulang nilai yang sama berkali-kali, kamu cukup mendefinisikan variabel sekali dan menggunakannya di tempat lain.

3. Meningkatkan Konsistensi Desain
   Dengan variabel, kamu dapat memastikan bahwa warna, ukuran font, margin, dan nilai-nilai lainnya konsisten di seluruh halaman web.

4. Dinamis dan Mudah Diubah
   Variabel CSS memungkinkan kamu untuk membuat desain yang lebih dinamis. Kamu bisa mengubah nilai variabel melalui JavaScript, yang memungkinkan penyesuaian gaya secara langsung tanpa harus merubah file CSS.

Contoh Penggunaan CSS Custom Properties dalam Proyek

Mari kita lihat contoh lebih lanjut tentang bagaimana kamu bisa menggunakan CSS variables dalam proyek web sederhana. Misalnya, kita akan mendefinisikan beberapa warna tema dan menggunakannya di berbagai bagian situs.

:root {
    --main-bg-color: #ffffff;
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-family: 'Arial', sans-serif;
    --font-size: 14px;
    --spacing: 20px;
}

/* Menggunakan variabel */
body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    background-color: var(--main-bg-color);
    margin: 0;
    padding: var(--spacing);
}

header {
    background-color: var(--primary-color);
    color: var(--main-bg-color);
    padding: var(--spacing);
}

footer {
    background-color: var(--secondary-color);
    color: var(--main-bg-color);
    padding: var(--spacing);
}

Dalam contoh di atas:

• Semua warna, font, dan margin diatur menggunakan variabel CSS.
• Dengan cara ini, kamu hanya perlu mengubah satu variabel (misalnya --primary-color) untuk mengubah seluruh tema warna di situs.

Mengubah Nilai Variabel dengan JavaScript

Salah satu hal keren dari CSS variables adalah kamu bisa mengubah nilai variabel tersebut menggunakan JavaScript! Ini membuka banyak kemungkinan, seperti membuat tema gelap/terang (dark mode/light mode) atau membuat situs web yang lebih dinamis.

Contoh mengubah nilai variabel dengan JavaScript:

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

Kode ini akan mengganti warna utama dari elemen yang menggunakan variabel --primary-color menjadi merah (#e74c3c).

Penutup

CSS Custom Properties atau CSS Variables adalah alat yang sangat powerful untuk membuat pengelolaan gaya di website lebih fleksibel dan mudah. Kamu bisa menggunakannya untuk mengatur tema, memperbarui gaya secara global, dan bahkan berinteraksi dengan JavaScript untuk membuat website yang lebih dinamis. Dengan memanfaatkan variabel CSS, kode kamu akan menjadi lebih bersih, lebih konsisten, dan lebih mudah dipelihara.

Sekianlah belajar tentang CSS Custom Properties. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial CSS selanjutnya di www.code80vity.com. Semoga kamu bisa membuat website yang lebih dinamis dan mudah dikelola menggunakan variabel CSS! ?