野空文庫

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。

# Functional CSS 的筆記

> Tools, not rules
> 
> 以前的最佳實踐不一定適用於現在的狀況，以前的 class name 不是這樣用的，不代表現在就不行。
> 
> 
> 我們不該墨守成規，不該執著在那些規則上面；如果別的做法有顯而易見的好處，那為何不呢？




## 優點

- 降低 CSS 檔案大小
- 最大程度縮減 scope，讓維護變得容易



## 缺點

- class name 很長，直接看 HTML 的話不好閱讀
- 如果沒辦法做到 component 化，那就不適合使用
- 需要花時間上手語法及熟悉各種縮寫

## Ref

### 正

- https://blog.huli.tw/2019/01/27/functional-css/
- https://blog.huli.tw/2022/05/23/atomic-css-and-tailwind-css/
- https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

### 反

- https://dev.to/brianboyko/tailwindcss-adds-complexity-does-nothing-3hpn