Berkenalan dengan CSS in JS pada Vue JS. Apa Untungnya?
CSS in JS mungkin sudah sangat umum di kalangan para developer React JS, lantas bagaimana jika kita implementasikan gaya styling ini pada aplikasi Vue? Apa akan mempermudah development?
Alhamdulillah, setelah sekian lama browsing akhirnya ketemu juga cara setting CSS in JS pada Vue JS. Sepertinya topik ini layak untuk dijadikan tulisan, sekedar untuk dokumentasi tempat mengingat kembali sambil melemaskan jemari yang sudah lama tak menari.
Tapi ternyata panjang banget, mungkin akan dipisah jadi beberapa part — Kalau sempat. haha.
Catatan
Hmm.. sebelum terjadi salah paham, disini saya menggunakan JSX sebagai templating syntax. Butuh alasan gak kenapa? yaaa hanya karena preferensi pribadi yang lebih nyaman menggunakan JSX.
Why CSS in JS
Baiklah langsung aja yaaa. Kenapa sih pakai CSS in JS? kenapa tidak pakai tag <style> yang ada di vue single file aja? kembali lagi, ini hanya masalah selera, nyaman menggunakan CSS styling konvensional — a la Vue JS — atau menggunakan CSS in JS yang punya beberapa kelebihan seperti:
- Bisa inject props component pada deklarasi styling yang dibuat
- Membuat nama komponen daripada membuat nama class CSS
- Composeable
- Mempunyai Theme Provider
Yang saya rasakan baru 4 itu sih kelebihannya. Yuk simak beberapa contoh implementasinya sebagai berikut:
Inject Props
Adanya inject props memudahkan untuk melakukan dynamic styling tanpa harus membuat banyak class ataupun melakukan inline styling, biarkan styled-component yang handle itu semua.
Selain bisa membuat value dari CSS properties jadi dinamis, styled-component juga memudahkan membuat conditional styling tanpa harus menuliskan class tambahan.
Secara ajaib styled component akan membuat 2 styling dengan warna background dan hover state yang berbeda sesuai dengan props yang dimilikki oleh komponen <MyButton/>.
Semisal props success bernilai true, maka komponen akan berwarna hijau dan tidak memiliki efek khusus pada saat dihover. Dan saat props success bernilai false, maka komponen akan berwarna merah dan memiliki efek khusus saat dihover, yaitu opacitynya akan berkurang.
Jika diperhatikan, kita tidak menambahkan nama kelas pada komponen, melainkan kita membuat komponen baru dengan styling yang dinamis.
Mudah di-Compose
CSS tentu tidak bisa dihindarkan dari kata Cascading. kata yang memungkinkan CSS untuk bisa memadukan antar satu class dengan class yang lainnya secara bersamaan. Kalau di styled-components namanya composing.
Sebenernya banyak sekali contoh yang keren di laman reponya. tapi saya akan memberikan contoh composing pada styled-components yang sering saya gunakan.
Atau.. kita bisa menggunakan string biasa, sehingga kita bisa memadukan cara ini dengan kalkulasi menggunakan sebuah function yang kita buat sendiri.
Styled Component memungkinkan untuk membuat composed styling yang dinamis.
Theme Provider
Sebenarnya keuntungan menggunakan theme provider bisa dicapai menggunakan cara yang lain seperti menggunakan CSS Variable biasa. Karena pada dasarnya theme provider ini menyediakan semacam pallete yang isinya bisa jadi definisi warna maupun definisi ukuran yang nantinya bisa diakses langsung oleh styled-component.
Bayangkan ketika aplikasi kita akan ditambahkan fitur “switch to dark mode”. Hal ini lebih mudah kita achieve dengan menggunakan theme provider pada styled-components ketimbang menambahkan class dark-mode pada element <body>, kemudian menduplikasi hampir semua class component yang ada pada aplikasi kita. Hmm… capek pasti. Beda halnya jika kita menggunakan styled components. Tinggal ganti aja value dari variable warna pada Theme Provider, semisal:
<ThemeProvider
theme={{
bg: "black",
text: "white",
borderColor: "white",
}}
>
// ... Other Styled Component
</ThemeProvider>Kalau dipikir-pikir, kenapa kita nggak mutasi CSS Variable aja ya? iya sih sebenernya kita bisa menggunakan cara tersebut. Jadi terserah selera. Kalau saya lebih prefer menggunakan theme provider karena bisa bersentuhan langsung dengan state aplikasi tanpa harus memutasi CSS ataupun DOM secara langsung yang pasti akan sedikit lebih tricky.
Next Step
Gimana sudah tertarik menggunakan styled-component? Kalau masih tertarik, selanjutnya perlu melakukan konfigurasi lebih agar lebih “nyaman” saat menggunakan styled-component. Tapi tidak akan dibahas pada artikel kali ini.
Kesimpulan
Setelah kenal dengan styled component, saya harap teman-teman sudah punya gambaran apakah cara ini layak diterapkan pada aplikasi yang sedang dikembangkan atau dengan cara yang biasanya saja karena didukung oleh CSS pre-processor. Itu semua kembali pada selera masing-masing. Tak perlu ada war diantara kita. Tapi bila ingin mencoba styling dengan cara yang lain, bolehlah coba satu project menggunakan styled-components.
Penutup
Setiap detil konten dalam artikel ini tidak bermaksud untuk show off, menyinggung, menyindir, ataupun sejenisnya. Melainkan untuk catatan pribadi saya tentang cara intorduction CSS in JS.
Semoga para pembaca bisa mendapatkan benefit dari membaca artikel ini.
Sangat terbuka untuk kritik dan saran. Kalau saya salah, mohon dengan sangat untuk diingatkan. Semoga bermanfaat dan jangan lupa Clap and Share~
Let’s talk about some projects with me
Just Contact Me At:
- Email: bosnaufalemail@gmail.com
- Skype Id: bosnaufal254
- twitter: @BosNaufal
- telegram: @BosNaufal
