Saya disertai oleh Dustin Schau dalam video ini dan dia akan membawa saya menjelajah dunia mengenai apa yang telah dikenali sebagai CSS-in-JS. Maksudnya, melakukan gaya anda sepenuhnya dalam JavaScript, dan bukannya dalam .cssfail yang anda buat sendiri.
Dustin adalah panduan sempurna untuk ini, kerana dia mencipta alat penerokaan hebat yang disebut CSS di JS Playground dan juga mempunyai kursus baru mengenai perkara ini.
Sekiranya anda ingin tahu mengapa ada yang berminat untuk mengikuti laluan CSS-in-JS, berikut adalah beberapa sebab yang kami bincangkan dalam video:
- Penghapusan kod mati. Satu-satunya gaya yang dimuat adalah gaya untuk komponen yang digunakan pada waktu tertentu. Tidak ada penghantaran gaya yang tidak digunakan. Apabila komponen mati, begitu juga gaya.
- Memarkir. Menulis gaya baru tidak boleh mempengaruhi perkara lain di tempat lain di laman web ini, jadi tidak perlu risau untuk menulis gaya yang mempunyai akibat buruk atau tidak diingini di tempat lain kerana pemilih dalam ruang lingkup global. Kami mendapat perlindungan skop dengan ideologi penamaan seperti BEM, tetapi tidak dikuatkuasakan oleh perkakas.
- Penamaan tanpa bimbang. Dalam beberapa kes, tidak perlu memilih nama atau ID kelas untuk apa yang digayakan kerana outputnya mengandungi UI.
- Ergonomi pemaju. Adalah baik jika mempunyai gaya dalam fail yang sama (atau sebaliknya sangat dekat) komponen itu sendiri. Dengan cara yang sama, sebilangan pemaju berasa sangat selesa di JSX. Juga dapat menggayakan sesuatu tanpa perlu risau bermaksud pembangun mungkin merasa lebih berwibawa dalam menggayakan gaya dan bukannya diintimidasi olehnya.
- Reka bentuk sistem yang mesra. Sistem reka bentuk adalah mengenai komponen dan begitu juga React. Cara berfikir pelengkap ini selaras antara satu sama lain.
- Kemungkinan JavaScript dalam CSS. Melakukan ini dengan pengendali logik dan memberikan nilai dan matematik dan yang lain, mempunyai kekuatan penuh JavaScript dalam gaya sangat berguna.
Dan itu bukan segalanya, tetapi anda dapat melihat mengapa ia menarik bagi sesetengah orang. Ia sememangnya mendorong banyak perbincangan. Mengapa tidak apabila ia menawarkan semua faedah tersebut? Ia adalah persekitaran pembangunan yang sangat berbeza yang tidak semestinya diklik dengan semua orang. Ia memerlukan membongkok platform web untuk melakukan perkara yang agak tidak biasa dan yang disertakan dengan ketuat. Belum lagi ada kos harfiah (ukuran pakej dan lain-lain) yang pengguna bayar, yang lebih baik anda harapkan dengan kecekapan.
Dustin sejauh ini untuk membangun demo menggunakan Sass untuk menggayakan sesuatu untuk membandingkannya dengan bagaimana ia dapat dilakukan dengan CSS-in-JS, yang menunjukkan bagaimana gaya porting serta kemungkinan untuk melakukannya.