[Coding] 目前做 React 專案，CSS 方案沒研究太深，只粗略了解了一下 CSS-in-JS 與 CSS module 的差異。由於 CSS module 在 React 原生支援，我就直接選用這個了

CSS-in-JS 當時看了一些 example code，那寫法我很不喜歡也是個原因

現在碰 Next.js，除了原生支援 CSS module，也支援 styled-jsx

查了一下才知道 CSS-in-JS 也有很多不同的方案，當初我看到的範例是 styled-components

styled-components

這個寫法上，大致是在上方宣一個變數，用比較特殊的寫法去宣告 CSS style，屁股還得帶一個看起來像是轉換用的 function，最後再把這變數拿還用。反正，這電波沒打到我就是

現在看到 styled-jsx 的寫法，我整個眼睛就亮了

GitHub - vercel/styled-jsx: Full CSS support for JSX...

這寫法就直覺多了，而且跟 Vue 的風格很接近，在 Vue 跟 React 之間穿梭就比較不會錯亂

只是 Vue 的 style 寫法特規出來，支援 Sass 比較方便。styled-jsx 原作者好像沒有弄相關方案。得用社群提供的 lib

@styled-jsx/plugin-sass

不過，如果沒有在用 Sass 的進階功能去做自己的 CSS lib，只是想圖個巢狀寫法的話，可能不太需要用 Sass

目前個人理解上，CSS 沒有作組件化，全都是 global 的時候，利用 Sass 的巢狀寫法，在管理上會方便很多

但 CSS 組件化之後，就不太會有全域污染的問題，也就不需要像以前那樣，在父層打不同的 class name 當標記，再利用 Sass 巢狀充當 group 管理用

而且 CSS 預處理用的多，webpack 開發熱更新也越慢...... 這就凸顯出 Vite 的強大了

可惜 Next 中就不是 Vue 家族的，現階段要找 Vite 版本的還找不到，但 Nuxt 那邊已經有了