3 Kelebihan Dan Kekurangan Menggunakan CSS Variable
TL;DR
Walaupun umum digunakan oleh template-template front-end di internet dan website bisnis skala besar, penggunaan variable masih jarang diterapkan pada pengembangan website dari scratch. Ini dikarenakan proses perencanaan pengembangan memiliki lebih banyak waktu sehingga dapat menimbang kelebihan penggunaan variable.
Kelebihan
Semakin banyak kode, semakin terstruktur
Karena variable digunakan sebagai parameter yang dibuat atas hasil konversi dari desain, semakin banyak kode yang dikonversi maka semakin banyak parameter yang digunakan.
Mengemat waktu development
Bayangkan untuk konversi desain komponen yang sama dalam kasus penggunaan yang berbeda, misal membuat sebuah button berisi icon lalu membuat lagi sebuah button berisi icon yang menyatu dengan inputan, satu-satunya yang membedakan adalah background-color dan border-radius, penggunaan variable di sini untuk mencegah konversi desain untuk property yang sudah pernah
Redesign bukan lagi masalah
Tanpa menggunakan variable, mengubah warna beberapa komponen dilakukan dengan fitur Find & Replace untuk mencari kode hex yang disalin dari DevTools, harus teliti untuk tidak salah mengganti warna. Lalu bagaimana jika redesign? Mengubah banyak property milik banyak komponen tentu masalah jika tidak menerapkan variable.
Kekurangan
Penamaan variable perlu waktu
Memberi nama variable adalah hal yang sangat-sangat simpel tapi bukanlah hal yang mudah, tidak meluangkan cukup waktu untuk menamakan variable pertama menjadikan nama variable selanjutnya tidak konsisten yang berakibat variable tidak digunakan karena sulit dimengerti. Maka luangkan waktu untuk menentukan urutan-urutan nama variable, misal berdasarkan warna, state atau jenis elemen terlebih dahulu, juga pelajari penamaan dengan metodologi BEM jika perlu.
Value menjadi lebih panjang
Panjang kode value tentu menentukan berapa lama untuk membaca property, misal membaca padding: 2px 6px 4px 8px; tentu lebih sebentar dibanding membaca padding: var(--button-promo-padding-top) var(--button-promo-padding-right) var(--button-promo-padding-bottom) var(--button-promo-padding-left);. Ini adalah konsekuensi terbesar menggunakan variable, namun value yang lebih panjang dapat lebih sebentar untuk dimengerti jika value lebih deskriptif, misal height: calc(100dvh – 72px + 16px + 2px); dibanding height: calc(100dvh – (var(--topbar-height) + var(--topbar-margin-bottom) + var(--topbar-border-y)));, lebih lama baca namun lebih sebentar untuk mengerti.
Memakan waktu maintenance
Singkatnya, ini adalah kebalikan dari kelebihan di poin ketiga yang permasalahannya adalah waktu terutama saat ada perubahan desain skala besar. Perubahan tidak selalu pada value, misal pada penambahan property yang artinya menambah waktu untuk membuat variable baru, apalgi jika ternyata penggunaan variable tidak dibutuhkan. Hanya mungkin diatasi dengan ketelitian dan seiring waktu pengembangan.