Saya bergabung dengan Dustin Schau dalam video ini dan dia akan membawa saya berkeliling dunia tentang apa yang kemudian dikenal sebagai CSS-in-JS. Artinya, melakukan penataan gaya Anda sepenuhnya dalam JavaScript, bukan di .cssfile yang Anda buat sendiri.
Dustin adalah panduan yang sempurna untuk ini, karena ia menciptakan alat eksplorasi hebat yang disebut CSS di JS Playground dan juga memiliki kursus baru tentang subjek tersebut.
Jika Anda penasaran mengapa ada orang yang tertarik untuk menggunakan rute CSS-in-JS, berikut beberapa alasan yang kami diskusikan dalam video:
- Penghapusan kode mati. Satu-satunya gaya yang dimuat adalah gaya untuk komponen yang digunakan pada waktu tertentu. Tidak ada pengiriman gaya yang tidak digunakan. Ketika sebuah komponen mati, begitu pula gayanya.
- Pelingkupan. Menulis gaya baru tidak dapat memengaruhi hal lain di tempat lain di situs, jadi tidak perlu khawatir tentang menulis gaya yang memiliki konsekuensi buruk atau tidak diinginkan di tempat lain karena pemilih dalam lingkup global. Kami mendapatkan perlindungan ruang lingkup dengan ideologi penamaan seperti BEM, tetapi tidak didukung oleh perkakas.
- Penamaan tanpa khawatir. Dalam beberapa kasus, tidak perlu memilih nama kelas atau ID untuk apa yang ditata karena keluarannya berisi UI.
- Pengembang ergonomis. Akan menyenangkan untuk memiliki gaya dalam file yang sama (atau sangat dekat dengan) komponen itu sendiri. Dengan cara yang sama, beberapa pengembang merasa sangat nyaman di BEJ. Juga dapat menata berbagai hal tanpa kekhawatiran pelingkupan berarti pengembang mungkin merasa diberdayakan tentang gaya daripada diintimidasi olehnya.
- Sistem desain ramah. Sistem desain adalah tentang komponen dan begitu pula React. Cara berpikir yang saling melengkapi ini selaras satu sama lain.
- Kemungkinan JavaScript di CSS. Melakukan ini dengan operator logika dan meneruskan nilai dan matematika dan yang lainnya, memiliki kekuatan penuh JavaScript dalam gaya sangat berguna.
Dan itu belum semuanya, tetapi Anda dapat melihat mengapa ini menarik bagi sebagian orang. Hal tersebut tentunya telah menginspirasi banyak diskusi. Mengapa tidak ketika itu menawarkan semua manfaat itu? Ya, ini adalah lingkungan pengembangan yang sangat berbeda yang tidak selalu cocok dengan semua orang. Ini membutuhkan pembengkokan platform web untuk melakukan hal-hal yang agak tidak biasa dan itu disertai dengan kutil. Belum lagi ada biaya literal untuk itu (ukuran paket dan semacamnya) yang dibayar pengguna, yang sebaiknya Anda bayar sendiri dengan efisiensi.
Dustin melangkah lebih jauh dengan membuat demo menggunakan Sass untuk menata berbagai hal untuk membandingkannya dengan bagaimana hal itu dapat dilakukan dengan CSS-in-JS, yang menunjukkan bagaimana gaya porting terlihat serta kemungkinan melakukannya.