是說上次的碎碎念好像有點莫名地在我不知道的地方流傳，我根本沒宣傳那篇文章才對…
總之歡迎關注 React碎碎念 系列文章
碎碎念大部分是個人意見，客觀部分敘述有錯誤歡迎指證。
有一天
這天在 ReactJS.tw 看到了人家轉貼的 新工具介紹文章 — React Storybook，點過去看完之後順道看了一下作者還有寫些什麼文章，於是發現了這篇，也就是本文的主角
推薦讀完再繼續看下去。
想想上次發的 React 碎碎念: 艱困的新手之路 也是因為被一些看到的東西點燃了(X)
你原本怎麼寫 CSS？
其實原本有在寫 CSS 到一定程度的人(不管是前端工程師還是網頁設計師)，一般會碰到一個轉捩點就是 — 習得 CSS 心法 (WTF)。
寫 CSS 的人，隨著碰過的網頁跟經驗增加，漸漸碰到頁面趨向複雜或是網站越來越巨大，然後 CSS 寫一寫就崩潰了。
於是坊間就有各種拯救你的心法出現，是經過時間淬鍊的成果，你可以選擇 follow 一種，或著結合眾家精隨融會貫通。(或著像我只學了皮毛就一直亂寫)
比較有名的心法這邊列三個：
還有一則很容易不小心就搜尋到的投影片 — 漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
歡迎來到 React 的世界
然而，就是這個然而
在 React 崛起之後，因應它用力的 component 化，帶動了嶄新的 CSS 風潮。上面的 Medium 文章中列出搭配 React 使用的方式有：
- 使用現成的 CSS framework
- 寫 (good old) CSS
- 用別人寫的 React-based UI
- 用 CSS Modules
- 在 JS 裡面寫 CSS
上面就 React 出現之後才崛起的其實又大體上可以分成兩類：
- 在 JS 裡面寫 CSS
- 用 CSS Modules
在 JS 裡面寫 CSS
最基本款的就是直接在 React 的 style prop 上面寫 inline CSS，這一定會有很多事情做不到，如果你的 React component 不需要用到 :hover 或是 media queries 之類的似乎是無傷大雅(嗎)
[CSS in JS 範例] react-custom-scrollbar
於是為了稍微取回 CSS 的彈性，你可能還是會需要像 Radium 這樣的工具。
Radium 擴展了 style prop 的能力，進而讓在 JS 中寫 CSS 達到了一個新的高度，老實說看起來真的算是一時之選。
接著回頭看一眼走火入魔的角度… 就是傳說中問出「為什麼新手們好像都覺得 React 很難上手？」點燃 fatigue 導火線(?) 的 Pete Hunt (編按: 他原本在 Facebook 工作，並且在推廣 React，現在已經換工作)。
殺意的 jsxstyle 登場！
jsxstyle 從另一個角度來解決這個問題，將「在 JS 裡面寫 CSS」用 JSX syntax 包裝起來，可謂是空前絕後(的 over-engineered)。
用 CSS Modules
第一眼看到 CSS Modules 真的確實非常讓人驚豔，它似乎很好的解決了 global CSS 的問題。
CSS Modules 使用了一些工程的力量，讓所有的 CSS 預設為 local (從 Web technology 的角度來講就是 scoped CSS)。配合 React 的崛起簡直就是最佳人選(component 只要管自己就好)。
值得一提的是 CSS Modules 其實不一定要搭 React，總之你只要想辦法把 className 塞進 HTML element 上就可以 work，算是一個到處通用的解決方案。
But，還是有人覺得 CSS Modules 寫起來有些彆扭，於是在 React + CSS Modules 之上又發展出了 React CSS Modules(欸是說這名字跟沒取一樣)。
React CSS Modules 真的是一劑猛藥，它讓套用了 CSS Modules 的 React component 看起來還是很帶 CSS 感，連我看起來都覺得非常 promising。
碎碎念
為了 component 化做的努力我認同，但我始終覺得有些東西並不是出自「真正的前端工程師」之手。
所謂「真正的前端工程師」我是指對 web 技術有熱情，真正熱愛網頁的人，而不是覺得 “science the shit out” 本身非常酷的人。
狂推 CSS in JS 的人在我看來簡直就是 CSS hater… 而 global CSS 也真的沒有那麼糟。
目前我還是保持 good old CSS (就是沒變)，基本上是完全不考慮 CSS in JS，真要選的話，可能性最高的是 React CSS Modules。因為我還是可以從 CSS Modules 那邊獲得一點對 CSS 的初心 (尤其是 React CSS Modules)。
最後的 concern 大概有點像是 這個 issue 在討論的東西，我自己是希望在有了 local scope 之餘還是能夠繼續擁有 CSS 的彈性，然而看來又是一個可能跟設計哲學有關的東西。
在上次的碎碎念裡已經講了很多的 React 上手的阻礙，現在到了 CSS 你又必須要重新面對一個抉擇，還真的是絕體絕命啊…
後記
一味的工程化並不能解決所有問題，希望各位聰明的大大多換換角度看一看。
喔不過當然，最棒的是，我不想用我還是可以不要用。
其實很多想法很難表達，又擔心表達得不好，碎碎念已經是我最大的努力了。