使用者工具

網站工具


learn:functional-css

差異處

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

連向這個比對檢視

下次修改
前次修改
learn:functional-css [2022/09/16 15:35] – 建立 admin_wi1d5kylearn:functional-css [2022/09/16 15:52] (目前版本) – [優點] admin_wi1d5ky
行 1: 行 1:
 # Functional CSS 的筆記 # 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/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 - https://dev.to/brianboyko/tailwindcss-adds-complexity-does-nothing-3hpn
learn/functional-css.1663342542.txt.gz · 上一次變更: 2022/09/16 15:35 由 admin_wi1d5ky

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki