Manfaat menggunakan Properti Kustom dalam sistem desain dan library komponen.
Saya Dave dan saya adalah Developer Front-end Senior di Nordhealth. Saya mengerjakan desain dan pengembangan sistem desain Nord, yang mencakup pembuatan Komponen Web untuk library komponen kami. Saya ingin membagikan cara kami memecahkan masalah seputar gaya visual Komponen Web menggunakan Properti Khusus CSS, dan beberapa manfaat lain dari penggunaan Properti Khusus di sistem desain dan library komponen.
Cara kami mem-build Komponen Web
Untuk mem-build Komponen Web, kita menggunakan Lit, library yang menyediakan banyak kode boilerplate seperti status, gaya cakupan, pembuatan template, dan lainnya. Lit tidak hanya ringan, tetapi juga dibuat di native JavaScript API, yang berarti kita dapat mengirimkan paket kode yang ramping yang memanfaatkan fitur yang sudah dimiliki browser.
Namun, hal yang paling menarik dari Web Components adalah komponen ini berfungsi dengan hampir semua framework JavaScript yang ada, atau bahkan tanpa framework sama sekali. Setelah paket JavaScript utama dirujuk di halaman, menggunakan Komponen Web sangat mirip dengan menggunakan elemen HTML native. Satu-satunya tanda nyata bahwa ini bukan elemen HTML native adalah tanda hubung yang konsisten dalam tag, yang merupakan standar untuk memberi tahu browser bahwa ini adalah Komponen Web.
Enkapsulasi gaya Shadow DOM
Sama seperti elemen HTML native yang memiliki DOM Bayangan, begitu juga dengan Komponen Web. DOM Bayangan adalah hierarki node tersembunyi dalam elemen. Cara terbaik untuk memvisualisasikan hal ini adalah dengan membuka web inspector dan mengaktifkan opsi "Tampilkan hierarki Shadow DOM". Setelah melakukannya, coba lihat elemen input native di inspector—Anda kini memiliki opsi untuk membuka input tersebut dan melihat semua elemen di dalamnya. Anda bahkan dapat mencobanya dengan salah satu Komponen Web kami—coba periksa komponen input kustom kami untuk melihat Shadow DOM-nya.
Salah satu keuntungan (atau kerugian, bergantung pada sudut pandang Anda) dari Shadow DOM adalah enkapsulasi gaya. Jika Anda menulis CSS dalam Komponen Web, gaya tersebut tidak dapat bocor dan memengaruhi halaman utama atau elemen lainnya; gaya tersebut sepenuhnya berada dalam komponen. Selain itu, CSS yang ditulis untuk halaman utama atau Komponen Web induk tidak dapat bocor ke Komponen Web Anda.
Enkapsulasi gaya ini adalah manfaat dalam library komponen kita. Hal ini memberi kita lebih banyak jaminan bahwa saat seseorang menggunakan salah satu komponen kita, komponen tersebut akan terlihat seperti yang kita inginkan, terlepas dari gaya yang diterapkan ke halaman induk. Dan untuk memastikannya lebih lanjut, kita menambahkan all: unset;
ke root, atau "host", dari semua Komponen Web.
Namun, bagaimana jika seseorang yang menggunakan Komponen Web Anda memiliki alasan yang sah untuk mengubah gaya tertentu? Mungkin ada baris teks yang memerlukan lebih banyak kontras karena konteksnya, atau batas harus lebih tebal? Jika tidak ada gaya yang dapat masuk ke komponen Anda, bagaimana cara membuka opsi gaya tersebut?
Di sinilah Properti Khusus CSS berperan.
Properti Kustom CSS
Properti Kustom diberi nama yang sangat sesuai—ini adalah properti CSS yang sepenuhnya dapat Anda beri nama sendiri dan menerapkan nilai apa pun yang diperlukan. Satu-satunya persyaratan adalah Anda harus memberi awalan dua tanda hubung. Setelah Anda mendeklarasikan properti kustom, nilainya dapat digunakan di CSS menggunakan fungsi var()
.
Dalam hal pewarisan, semua Properti Khusus diwarisi, yang mengikuti perilaku umum properti dan nilai CSS reguler. Setiap properti kustom yang diterapkan ke elemen induk, atau elemen itu sendiri, dapat digunakan sebagai nilai pada properti lain. Kami banyak menggunakan Properti Kustom untuk token desain dengan menerapkannya ke elemen root melalui Framework CSS kami, yang berarti semua elemen di halaman dapat menggunakan nilai token ini, baik itu Komponen Web, class helper CSS, atau developer yang ingin mengambil nilai dari daftar token kami.
Kemampuan untuk mewarisi Properti Khusus, dengan penggunaan fungsi var()
, adalah cara kita menembus DOM Bayangan Komponen Web dan memungkinkan developer memiliki kontrol yang lebih terperinci saat menata gaya komponen.
Properti Kustom di Komponen Web Nord
Setiap kali mengembangkan komponen untuk sistem desain, kami menggunakan pendekatan yang cermat untuk CSS-nya—kami ingin mendapatkan kode yang ringkas, tetapi sangat mudah dikelola. Token desain yang kita miliki ditentukan sebagai Properti Kustom dalam Framework CSS utama kita pada elemen root.
Nilai token ini kemudian direferensikan dalam komponen kita. Dalam beberapa kasus, kita akan menerapkan nilai langsung pada properti CSS, tetapi untuk kasus lainnya, kita akan menentukan Properti Kustom kontekstual baru dan menerapkan nilai ke properti tersebut.
Kita juga akan memisahkan beberapa nilai yang spesifik untuk komponen, tetapi tidak ada dalam token kita, dan mengubahnya menjadi Properti Kustom kontekstual. Properti Kustom yang kontekstual dengan komponen memberi kita dua manfaat utama. Pertama, ini berarti kita dapat lebih "kering" dengan CSS karena nilai tersebut dapat diterapkan ke beberapa properti di dalam komponen.
Kedua, hal ini membuat perubahan status komponen dan variasi menjadi sangat rapi—hanya properti kustom yang perlu diubah untuk memperbarui semua properti tersebut saat, misalnya, Anda menata gaya status pengarahan kursor atau aktif, atau dalam hal ini, variasi.
Namun, manfaat yang paling efektif adalah saat kita menentukan Properti Khusus kontekstual ini pada komponen, kita akan membuat semacam API CSS kustom untuk setiap komponen, yang dapat dimanfaatkan oleh pengguna komponen tersebut.
Contoh sebelumnya menunjukkan salah satu Komponen Web kami dengan Properti Kustom kontekstual yang diubah melalui pemilih. Hasil dari seluruh pendekatan ini adalah komponen yang memberikan fleksibilitas gaya yang cukup kepada pengguna sekaligus tetap memeriksa sebagian besar gaya sebenarnya. Selain itu, sebagai bonus, kita sebagai developer komponen memiliki kemampuan untuk menangkap gaya yang diterapkan oleh pengguna. Jika ingin menyesuaikan atau memperluas salah satu properti tersebut, kita dapat melakukannya tanpa perlu mengubah kode pengguna.
Kami merasa pendekatan ini sangat efektif, tidak hanya bagi kami sebagai pembuat komponen sistem desain, tetapi juga bagi tim pengembangan kami saat mereka menggunakan komponen ini dalam produk kami.
Meningkatkan Properti Khusus
Pada saat penulisan, kami tidak benar-benar mengungkapkan Properti Kustom kontekstual ini dalam dokumentasi kami; namun, kami berencana untuk melakukannya agar tim pengembangan yang lebih luas dapat memahami dan memanfaatkan properti ini. Komponen kami dikemas di npm dengan file manifes, yang berisi semua hal yang perlu diketahui tentang komponen tersebut. Kemudian, kita menggunakan file manifes sebagai data saat situs dokumentasi di-deploy, yang dilakukan menggunakan Eleventy dan fitur Data Global-nya. Kami berencana menyertakan Properti Kustom kontekstual ini dalam file data manifes ini.
Area lain yang ingin kami tingkatkan adalah cara Properti Kustom kontekstual ini mewarisi nilai. Saat ini, misalnya, jika ingin menyesuaikan warna dua komponen pemisah, Anda harus menargetkan kedua komponen tersebut secara khusus dengan pemilih, atau menerapkan properti kustom langsung pada elemen dengan atribut gaya. Hal ini mungkin tampak baik, tetapi akan lebih membantu jika developer dapat menentukan gaya tersebut pada elemen penampung atau bahkan di tingkat root.
Alasan Anda harus menetapkan nilai Properti Kustom langsung pada komponen adalah karena kita menentukannya pada elemen yang sama melalui pemilih host komponen. Token desain global yang kita gunakan langsung di komponen akan langsung diteruskan, tidak terpengaruh oleh masalah ini, dan bahkan dapat dicegat di elemen induk. Bagaimana cara mendapatkan yang terbaik dari keduanya?
Properti Kustom pribadi dan publik
Properti kustom pribadi adalah sesuatu yang telah disusun oleh Lea Verou, yang merupakan Properti Kustom "pribadi" kontekstual pada komponen itu sendiri, tetapi ditetapkan ke Properti Kustom "publik" dengan penggantian.
Menentukan Properti Kustom kontekstual dengan cara ini berarti kita masih dapat melakukan semua hal yang kita lakukan sebelumnya, seperti mewarisi nilai token global dan menggunakan kembali nilai di seluruh kode komponen; tetapi komponen juga akan mewarisi definisi baru properti tersebut dengan baik pada dirinya sendiri atau elemen induk apa pun.
Meskipun dapat dikatakan bahwa metode ini tidak benar-benar "pribadi", kami tetap menganggapnya sebagai solusi yang cukup elegan untuk masalah yang kami khawatirkan. Jika ada kesempatan, kami akan mengatasi masalah ini di komponen kami sehingga tim pengembangan kami memiliki lebih banyak kontrol atas penggunaan komponen sekaligus tetap mendapatkan manfaat dari pembatasan yang telah kami terapkan.
Semoga insight tentang cara menggunakan Komponen Web dengan Properti Khusus CSS ini bermanfaat bagi Anda. Beri tahu kami pendapat Anda dan jika Anda memutuskan untuk menggunakan salah satu metode ini dalam pekerjaan Anda sendiri, Anda dapat menemukan saya di Twitter @DavidDarnes. Anda juga dapat menemukan Nordhealth @NordhealthHQ di Twitter, serta anggota tim saya yang telah bekerja keras untuk menyatukan sistem desain ini dan menjalankan fitur yang disebutkan dalam artikel ini: @Viljamis, @WickyNilliams, dan @eric_habich.
Banner besar oleh Dan Cristian Pădureț