差異處

這裏顯示兩個版本的差異處。

--- learn:functional-css [2022/09/16 15:37] – admin_wi1d5ky
+++ learn:functional-css [2022/09/16 15:52] (目前版本) – [優點] admin_wi1d5ky
@@ 行 1: / 行 1: @@
 # Functional CSS 的筆記
+> Tools, not rules
+>
+> 以前的最佳實踐不一定適用於現在的狀況，以前的 class name 不是這樣用的，不代表現在就不行。
+>
+>
+> 我們不該墨守成規，不該執著在那些規則上面；如果別的做法有顯而易見的好處，那為何不呢？
+## 優點
+- 降低 CSS 檔案大小
+- 最大程度縮減 scope，讓維護變得容易
+## 缺點
+- class name 很長，直接看 HTML 的話不好閱讀
+- 如果沒辦法做到 component 化，那就不適合使用
+- 需要花時間上手語法及熟悉各種縮寫
 ## Ref
@@ 行 9: / 行 29: @@
 - 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