很多 Developer 都不喜歡 CSS，我也不例外，但直到 TailwindCSS 出現，讓我對 CSS 完全改觀，重拾對 UI 熱情。
Version
TailwindCSS 2.1.1
Traditional CSS
我一直很不喜歡傳統 CSS，有幾點原因：
- 由於 CSS 與 HTML 分離，讓我不能只由 HTML 得知結果，還必須搭配 CSS，經常還須觀察 browser 才知道結果如何
- 由於 CSS 常搭配複雜的 selector，也很難簡單由 CSS 得知結果，最後還是得藉由 browser 才知道結果如何
- 由於 CSS 需搭配 selector 對應，因此需要為 class 命名想破頭，且若 UI 修改，需不斷對照 HTML 與 CSS 來回對應，降低開發效率
- 由於 CSS 是以 cascading 設計，實務上會不斷覆蓋 CSS，導致經年累月後 CSS 越來越大，且大部分 CSS 都是無效的，徒然增加 file size 而已
- 由於 CSS 是以多 selector 決定，當 selector 衝突時，還必須考慮其 precedence，非常複雜
- 由於一個 selector 可能對應多處 element，實務上很難重構 CSS，因為 side effect 太大了
CSS Framework
CSS 雖然功能強大，卻也非常繁瑣，因此很多 developer 改用 CSS framework 的 component 加快開發速度，但也面臨不少挑戰：
- Component 格式太制式，很難高度客製化
- 若要客製化必須使用 CSS 覆蓋方式，常會面臨 precendence 問題
- 一開始開發速度很快，但最後客製化維護又將省下時間吐回來
Functional CSS
Tailwind CSS 則以 Functional Programming 理念設計，完全顛覆傳統 CSS 與 CSS framework：
- CSS 由眾多 utility 構成，可以想像成 FP 的 pure function
- 自行在 HTML 組合 utility，由 HTML 就可得知結果，不需透過 browser
- 不使用 selector，因此沒有 precedence 問題
- 從複雜 selecor 解放，CSS 退化成自行組合 utility 成新的 utility，也可使用
@apply從 utility 再組合成 utility，類似 FP 組合小 function 成新 function 一樣 - 由於 utility 顆粒很小，因此很容易自行組合客製化，沒有 CSS framework 的 component 因顆粒太大而難以客製化問題
- 由於不覆蓋 CSS，也沒有 CSS 越來越大問題，還可使用 PurgeCSS 將沒用到 CSS 移除，大幅降低 file size
- 不再為 class 命名煩惱，utility 直接描述 element
- 由於 utility 直接描述 element 沒有 side effect，可以大膽重構 CSS
Conclusion
- Functional CSS 的另一個優點是其思考模式與 FP 相同，都是透過最小化問題並搭配 Function Composition，不會因 JavaScript 與 CSS 思維差異而造成人格分裂
- 此外 Tailwind CSS 的命名也比較人性化，CSS 雖然是簡單的 key / value 設計，但其 key 與 value 常使用過長單字難以記憶，而 Tailwind CSS 則將 key / value 簡化成雙單字的 utility，也符合一般 JavaScript 使用習慣
- 實務上也證明使用 Tailwind CSS 刻 UI 開發效率遠高於傳統 CSS，又比 CSS framework 容易客製化