Styled Components, Cara Modis Merias React Components

Saya akui, salah satu kelemahan terbesar saya di bidang Frontend Development adalah styling. Selain karena saya memang kurang jago desain — ojekbelanja.id ini buktinya, kalau ada yang bilang desainnya bagus, kalian luar biasa 😅 — , aspek lain yang cukup memusingkan adalah bagaimana menentukan nama class.

📚 Metodologi CSS

Sejak awal mula belajar Frontend, saya mulai mempelajari berbagai metodologi penamaan class di CSS, seperti BEM, SMACSS, dan OOCSS. Saya langung coba terapkan di project sampingan saya, Ojek Belanja, dan akhirnya saya tentukan untuk mengikuti salah satu dari ketiga metodologi tersebut. Hayoo, coba tebak, metodologi apa yang saya gunakan di project itu? 😏

Setelah mencobanya selama beberapa waktu, saya jadi bingung sendiri, sehingga saya mulai tidak konsisten dalam menerapkan metodologi penamaannya contohnya dapat dilihat di sini:

Gado-Gado CSS Selector.

Di situ dapat dilihat bahwa CSS selector saya rupa-rupa warnanya 😅. Mulai dari nama class yang tidak konsisten (kadang 2 kata, kadang 3 kata, kadang 4 kata), case yang tidak konsisten (kadang diawali huruf besar, kadang huruf kecil), sampai keterlibatan Type selectors di situ, yaitutd, yang barangkali seharusnya tidak perlu.

Ini terjadi karena saya mengalami kesulitan dalam menentukan mana kategori CSS rule yang termasuk Base, Layout, Module, State, dan Theme. — ini salah satu petunjuk untuk menebak metodologi CSS yang saya gunakan 😉 — . Ketika ingin menggunakan BEM pun, saya juga masih mengalami kesulitan dalam menentukan mana yang Body, Element, dan Modifier-nya — berarti semakin jelas bahwa metodologi CSS yang saya gunakan bukan BEM 😅.

⚛️ React inline styles

Dari sinilah saya mulai mencoba melirik inline styles di React. Tapi catatan langsung dari dokumentasi ini membuat saya jadi enggan menggunakannya.

Beberapa bulan setelahnya, alih-alih melanjutkan project yang terdampar itu, saya malah mencoba membuat ulang aplikasi yang sama dengan framework yang lain, yaitu Vue, hahaha.. 😂Kisah lengkapnya dapat dibaca di tulisan React atau Vue? ini.

𝗩 | Vue Scoped CSS

Salah satu fitur yang membuat saya terpesona dengan Vue adalah fitur Scoped CSS-nya. Cukup dengan menambahkan atributscoped di tag <style>, maka CSS yang kita tulis di tag tersebut hanya akan berdampak pada komponen terkait.

Vue Scoped CSS — source code.

Ini dimungkinkan karena vue-loader secara otomatis menambahkan atribut data-v-<hash_value> ke dalam tag component yang di-render, sehingga atribut tersebut dapat digunakan di dalam selector.

Sebagai contoh, source code di samping ini akan di-compile oleh vue-loader menjadi seperti ini:

Vue Scoped CSS — compiled.

Dengan demikian, beban saya dalam menentukan penamaan class menjadi sedikit berkurang, karena setiap penamaan class cukup memperhatikan elemen-elemen yang ada di komponen itu saja, tanpa perlu khawatir berdampak pada elemen-elemen di luar komponen terkait.

<💅> Styled Components

Singkat cerita, saya akhirnya kembali lagi ke React, karena ternyata pada akhirnya di kantor yang baru saya harus mengerjakan project menggunakan React. Kami menggunakan React Boilerplate sebagai dasar project kami, dan ternyata React Boilerplate ini menggunakan Styled Components untuk styling-nya.

Styled Components ini adalah salah satu dari sekian banyak alternatif CSS-in-JS library di React. Sebenarnya saya sudah pernah membacanya sekilas ketika awal mula Styled Components diluncurkan, tetapi saat itu saya tidak begitu tertarik karena menurut saya sepertinya akan sama ribetnya dengan library CSS-in-JS lainnya. Setelah mencoba menggunakannya secara langsung selama beberapa pekan, saya langsung jatuh cinta kepadanya 😍. Bahkan, kecintaan saya pada Styled Components inilah yang membuat saya semakin menyukai React, hehe.. 😁 Berikut akan saya jelaskan beberapa alasan mengapa saya sangat tertarik dengan Styled Components.

Tidak perlu lagi metodologi CSS

Lupakan metodologi CSS! Hehe.. 😁 Dengan Styled Components, kita tidak perlu lagi pusing dengan penamaan class, karena CSS rules yang kita tuliskan dapat dipastikan langsung melekat pada komponen terkait. Bahkan untuk styling elemen-elemen di dalam komponen itu pun tidak lagi memerlukan penamaan class, karena style-nya langsung melekat pada komponen/elemen tersebut, sehingga penamaan yang perlu dipikirkan cukup penamaan komponennya saja.

Styling tanpa className sama sekali.

Mudah di-debug

Berbeda dengan library CSS-in-JS pada umumnya yang menempelkan langsung styling ke dalam komponen sebagai inline style, Styled Components ini menempelkan styling-nya melalui class selector, dengan nama class yang di-generate secara otomatis dan unik untuk setiap komponen. Dengan demikian, apabila kita melakukan Inspect Element di Google Chrome, style yang diterapkan dapat terlihat lebih rapi dan mudah dibaca.

Sebagai contoh, coba bandingkan penampakan Chrome Developer Tools pada kedua project berikut:

CSS properties asli, bukan blasteran 🤣

CSS properties blasteran.

Buat yang sering mainan React, pasti sudah terbiasa dengan penulisan CSS blasteran seperti ini. Sesuai dengan penjelasan di dokumentasi resminya, atribut style di React hanya menerima camelCased properties, itupun dengan nilai property yang harus berupa JavaScript object, sehingga blue saja tidak dapat diterima kalau tidak didefinisikan terlebih dahulu, yang diterima adalah string 'blue', sebagaimana yang terlihat di contoh.

CSS properties asli.

Mari kita lihat bagaimana CSSproperties di Styled Components. Di sini, kita dapat menuliskan CSS properties persis sebagaimana yang didefinisikan di spesifikasi resmi CSS. Dengan demikian, kita tidak perlu lagi belajar menerjemahkan dari CSS asli ke CSS blasteran-nya React, sekaligus mematangkan pemahaman CSS kita. Jujur saja, semenjak mengerjakan project React menggunakan Styled Components, pengetahuan CSS saya jadi ikut bertambah juga, karena yang saya tuliskan adalah CSS asli. Sehingga apabila suatu saat nanti saya benar-benar harus menulis CSS di project lain — yang berbasis Vue misalnya — , saya dapat menggunakan kembali ilmu CSS yang sama persis seperti yang saya pelajari di project React ini.

Penutup

Sebenarnya masih banyak lagi keuntungan menggunakan Styled Components ini, tetapi akan terlalu panjang apabila saya jelaskan satu persatu di sini. Jika masih penasaran dengan berbagai keunggulan Styled Components, silakan simak langsung pemaparan dari penciptanya, Max Stoiber, di React Amsterdam tahun lalu. 😄