Dikenal sebagai custom properties, CSS variables adalah fitur dalam CSS untuk menyimpan value tertentu.

Daripada harus mengulangi value yang sama dalam kode CSS, Kamu bisa menyimpan value dalam variabel, lalu merujuk ke variabel tersebut di seluruh stylesheet setiap saat dibutuhkan. Proses ini menghilangkan kebutuhan untuk mengulangi value yang sama di berbagai tempat, sehingga memudahkan pembaruan dan maintenance kode.

Value bisa berupa apa pun yang biasanya dimasukkan dalam CSS, seperti warna, font size, margin, yang kemudian dapat digunakan kembali di semua file stylesheet di masa mendatang.

Namun, seperti halnya dengan semua teknologi baru, web developer harus memahami bagaimana mendeklarasikan, menerapkan, dan memanipulasi variabel ini secara efektif. Artikel ini akan membahas seluk-beluk CSS variables, mulai dari manfaat sampai cara penggunaannya. Yuk, simak!

Manfaat CSS Variables

Berikut beberapa manfaat utama dari CSS variables:

Memudahkan efisiensi dan maintenance kode

Salah satu fungsi utama menggunakan CSS variables adalah kemampuannya untuk mengefisiensikan kode CSS.

Sebagai contoh, ketika kamu menetapkan sebuah warna yang akan digunakan secara luas, CSS variables akan mendefinisikan warna tersebut sekali dan menggunakannya di berbagai tempat dalam stylesheet.

Namun, penting untuk diingat bahwa setiap perubahan pada nilai variabel juga memengaruhi semua properti yang menggunakan variabel tersebut. Oleh karena itu, kamu harus selalu memastikan perubahan yang dilakukan sesuai dengan keinginan, agar tidak terjadi perubahan yang tidak diharapkan pada desain website.

Hal ini tidak hanya menghemat waktu tetapi juga membuatnya lebih mudah untuk melakukan perubahan di seluruh website hanya dengan mengubah satu variabel.

Kustomisasi dan fleksibilitas

CSS variables menawarkan fleksibilitas dalam web development. Kamu bisa menetapkan value default dan bahkan mengubahnya secara dinamis dengan JavaScript. Dengan begitu, desain web lebih responsif dan dapat disesuaikan dengan preferensi user.

Misalnya, user dapat memilih dark mode atau light mode pada website. Menggunakan CSS variables, perubahan ini bisa berjalan dengan lancar.

Meningkatkan reliability kode

Kode yang mudah dibaca sangat penting untuk maintenance jangka panjang, terutama saat bekerja dalam tim.

Dengan CSS variables, kamu bisa memberikan nama/judul secara deskriptif untuk warna, font, atau value lainnya, sehingga membuat kode lebih mudah dibaca dan dipahami oleh developer lain.

Penggunaan global dan local

CSS variables dapat dideklarasikan secara global atau local.

Variabel global didefinisikan dalam :root dan dapat diakses dari mana pun dalam dokumen. Sementara variabel local hanya tersedia dalam lingkup tertentu. Penggunaan ini memberikan kontrol yang lebih baik atas bagaimana dan di mana variabel dapat digunakan.

Cara Menggunakan CSS Variables

Di bawah ini adalah cara dan contoh untuk menggunakan CSS variables:

#1 Deklarasikan CSS variables

Pertama, kamu perlu mendeklarasikan variabel CSS. Deklarasi biasanya dilakukan di dalam selector :root yang merupakan elemen paling atas dalam dokumen HTML, sehingga variabel tersebut tersedia secara global.

Perlu diwaspadai bahwa variabel global yang dideklarasikan di :root dapat diakses dan dimodifikasi dari seluruh bagian stylesheet yang sama. Artinya, setiap perubahan pada variabel akan berdampak setiap elemen yang menggunakan variabel tersebut.

Oleh sebab itu, saat mendeklarasikan variabel secara global, penting untuk mempertimbangkan struktur dan skala proyek agar tidak terjadi konflik yang dapat mempersulit proses debugging di kemudian hari.

Deklarasi variabel dimulai dengan dua tanda hubung dan diikuti oleh nama variabel, seperti:

Dalam contoh di atas, kita telah mendeklarasikan dua variabel CSS, yaitu --warna-utama dan --warna-sekunder dengan value hex untuk warna tertentu.

#2 Gunakan CSS variables

Setelah variabel dideklarasikan, kamu bisa mulai menggunakannya di seluruh stylesheet kamu. Untuk menerapkannya, gunakan fungsi var() seperti ini:

Dalam contoh di atas, kita menggunakan variabel yang telah dideklarasikan sebelumnya untuk menetapkan warna background dan warna teks menggunakan elemen dengan class .button.

#3 Variabel local (opsional)

Selain mendeklarasikan variabel secara global di dalam :root, kamu juga bisa mendeklarasikan variabel pada level lebih spesifik, seperti di dalam selector tertentu. Variabel ini hanya akan tersedia di dalam lingkup selector tersebut.

Contohnya, --warna-container hanya dapat dipakai di dalam elemen dengan class .container.

#4 Value fallback

Sangat penting untuk memiliki value fallback jika variabel tidak didefinisikan. Kamu bisa menambahkan value fallback langsung di dalam fungsi var().

Dalam contoh ini, jika --warna-utama tidak didefinisikan, background-color akan menggunakan warna biru sebagai value fallback.

FAQ (Frequently Ask Question)

Apakah CSS variables berbeda dengan variabel di bahasa pemrograman lain?

CSS variables berbeda dengan variabel di bahasa pemrograman lain karena fitur ini tidak melakukan perhitungan atau logika.

CSS variables hanya menyimpan informasi yang dapat digunakan kembali di seluruh CSS. Selain itu, fitur ini juga memiliki scope dan hanya tersedia di dalam dokumen CSS tempatnya didefinisikan, kecuali jika dideklarasikan di dalam :root yang membuatnya tersedia secara global.

Apakah semua browser mendukung CSS variables?

Kebanyakan browser modern mendukung CSS variables. Namun, versi browser yang lebih lama, terutama Internet Explorer 9, tidak mendukungnya.

Kamu dapat memeriksa dukungan browser ter-update di website seperti Can I use yang menyediakan informasi terbaru tentang kompatibilitas fitur web.

Apakah bisa menggabungkan CSS variables dengan JavaScript?

Pada dasarnya, kamu bisa menggabungkan CSS variables dengan JavaScript untuk mengubah value variabel secara dinamis berdasarkan interaksi user atau kondisi lainnya dalam web app. Penggabungan ini memberikan fleksibilitas besar dalam mengelola style UI.

Penutup

CSS variables (juga dikenal sebagai custom properties) adalah fitur dalam CSS untuk menyimpan value yang dapat digunakan kembali di seluruh dokumen CSS. Fitur ini membantu mengatur value seperti warna, ukuran font, atau hampir semua value CSS lainnya, lalu menggunakannya kembali di seluruh stylesheet dengan cepat.

Melalui CSS variables, developer bisa membuat desain yang konsisten dan mudah diubah, menghemat waktu sekaligus mengurangi kompleksitas yang sering terkait dengan pengeditan kode berulang.

‍