Variabel CSS dalam CSS Murni – Memulai dalam 5 Menit atau Kurang

Variabel CSS (atau secara resmi: properti khusus ) dalam CSS murni adalah penghemat waktu yang sangat besar bagi siapa saja yang mau menginvestasikan lima menit untuk mempelajari cara menggunakannya. Mereka sudah ada sejak CSS3, dan 92% dari semua pengguna memiliki browser yang mendukungnya. Menggunakan variabel CSS tidak memerlukan perubahan signifikan pada stylesheet yang ada atau alat baru dan dapat dengan mudah diterapkan ke proyek lama. Alih-alih memiliki kode warna hex yang ditulis di ratusan tempat dalam file, Anda dapat mendefinisikannya hanya di satu tempat – dengan variabel CSS. Penghemat waktu yang sangat besar dan bantuan dalam membuat stylesheet lebih konsisten.

Tunggu, jadi ini Saas or Less, kan?

Tidak, kita berbicara tentang CSS murni di sini, bukan CSS yang digabungkan dengan preprocessor seperti Saas, Less atau SCSS. Menggunakan variabel CSS tidak memerlukan alat tambahan, editor, atau perubahan dalam alur kerja Anda atau apa pun yang Anda gunakan. Oleh karena itu, file CSS yang ada tanpa variabel tidak memerlukan perubahan "khusus", dan Anda dapat mencampur dan mencocokkan – gunakan variabel hanya untuk bagian file, atau hanya di beberapa file proyek Anda.

Praprosesor CSS seperti Saas atau Less mendukung variabel juga. Selain itu, mereka memiliki lebih banyak fungsi dan opsi yang dapat Anda gunakan. Namun, seperti namanya, mereka membutuhkan preprocessor – alat yang mengubah CSS yang ditulis dalam Saas menjadi CSS murni. Jika Anda hanya membutuhkan variabel – CSS murni memiliki semua yang Anda butuhkan.

Variabel CSS adalah fungsi asli, dan itulah yang membuatnya hebat. Dengan sedikit usaha, stylesheet Anda jauh lebih mudah dibaca dan konsisten. Selain itu, setiap perubahan yang harus Anda lakukan nanti jauh lebih mudah dilakukan – tentu saja lebih cepat daripada melakukan pencarian&penggantian ketika Anda perlu mengubah kode warna di ratusan tempat .

Mari kita buat beberapa variabel

Seperti dalam bahasa pemrograman apa pun, ada dua langkah untuk menggunakan variabel : memberi mereka nilai (mendefinisikannya) dan menggunakannya (menempatkannya di semua tempat di mana Anda membutuhkan nilai itu). Kami akan melakukan hal yang sama;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Jika Anda ingin menggunakan variabel secara global (di mana saja) dalam file CSS, Anda harus mendefinisikannya di kelas semu :root . Lokasi dalam file tidak masalah. Itu bisa di awal, atau di akhir file. Tapi, Anda harus meletakkan variabel di :root . Nama harus dimulai dengan tanda hubung ganda -- dan tidak boleh berisi spasi. Variabel CSS dapat menyimpan nilai apa pun yang biasanya Anda tetapkan ke properti CSS; dari nilai sederhana seperti warna hingga ekspresi kompleks untuk properti singkatan seperti latar belakang atau bayangan.

Untuk menggunakan variabel (untuk mendapatkan nilainya) letakkan di fungsi var() . Jangan lupa bahwa semua nama variabel dimulai dengan -- . Itu semua yang perlu Anda ketahui untuk memulai.

Menggunakan nilai mundur

Jika variabel tidak didefinisikan, nilai fallback dapat diberikan ke fungsi var() sebagai parameter kedua.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Jangan khawatir jika nilai propertinya kompleks. Parameter fallback memungkinkan koma (lihat contoh box-shadow ). Ini juga memungkinkan untuk merangkai beberapa fungsi var() seperti yang ditunjukkan untuk warna di .custom-text . Jika --my-red dan --my-blue tidak terdefinisi, maka warna merah akan digunakan.

Menggabungkan var() dan calc() juga berfungsi, tanpa kejutan apa pun dalam sintaks. Berikut adalah contoh yang menyertakan variabel lokal yang hanya tersedia di kelas tempat variabel tersebut didefinisikan.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Gunakan calc() dengan hemat. Ini bukan hal yang buruk tetapi ketika digunakan secara berlebihan menjadi cukup bermasalah untuk di-debug dan dipelihara.

Mendapatkan dan mengatur variabel CSS melalui JavaScript

Dengan menggunakan JavaScript biasa, Anda dapat mengatur variabel CSS baru dan mengakses nilainya. Saya tidak menggunakan metode ini. Sebagai gantinya, saya lebih suka mengubah kelas elemen. Namun, tak ada salahnya jika Anda ingin mengakses variabel CSS melalui JavaScript. Ini tentu dapat digunakan dalam beberapa situasi. Mereka yang tetap menggunakan jQuery, dapat mengonversi kode menjadi plugin jQuery.

Untuk membuat variabel baru, atau mengubah nilai variabel yang sudah ada, gunakan:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Mengakses variabel sedikit lebih kompleks. Jika variabel didefinisikan melalui JS maka gunakan:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

Namun, jika didefinisikan melalui CSS (dan biasanya demikian), gunakan kode ini:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Masalah dan hal-hal yang harus diwaspadai

Sekarang setelah Anda mengetahui cara menggunakan variabel, jangan berlebihan dengan variabel tersebut dan buat variabel untuk setiap nilai properti dalam stylesheet. Misalnya, ini akan berlebihan dan menyalahgunakan seluruh konsep;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Anda tidak mencapai apa-apa. Baru saja mendapat --spacing-10 alih-alih 10px . Anda akan segera membuat dua puluh variabel lagi untuk setiap nilai piksel padding yang ada mulai dari 5px hingga 100px. Jika Anda ingin konsistensi maka gunakan konsep --small-padding, --medium-padding, --large-padding dan tetapkan nilai numerik yang sesuai.

Meskipun tidak diwajibkan oleh standar CSS , saya dengan sepenuh hati menyarankan untuk mendefinisikan semua variabel di satu tempat dan di awal file CSS . Dengan begitu, Anda akan selalu tahu di mana mereka berada dan dapat dengan cepat mengubah nilai. Jika Anda menyebarkan definisi di seluruh file, Anda akan kesulitan melacak berbagai hal dan mungkin akhirnya mendefinisikan variabel yang sama di banyak tempat. Debugging itu tidak akan menjadi tugas yang menyenangkan.

Tidak ada alasan untuk tidak menggunakan variabel CSS

Di Internet, segala sesuatunya bergerak maju dengan cepat (seperti cookie digantikan oleh penyimpanan lokal). Untuk proyek besar dan tim besar, beralih ke praprosesor CSS seperti Saas adalah cara yang tepat. Namun, untuk proyek yang lebih kecil atau proyek yang sudah ada yang membutuhkan pemeliharaan, variabel CSS dalam CSS murni adalah solusi yang tepat . Mereka sama sekali tidak memerlukan perubahan, peningkatan perangkat lunak atau alat atau apa pun. Anda mendefinisikan variabel dan mulai menggunakannya.