# 更好、更直覺的開發體驗 ! 當 Vue 遇上 Atomic CSS !

## 09:30 ~ 10:20

* 
* 
* 
* BEM | OOM 命名方式
* Atomic CSS
* 
* 
* 
* 較適用於像是平台頁面設計
* 避免產生重複性命名內容
* 初期需要準備大量的 class，適用於一頁式網頁
* 可花較少時間設計命名 (好處)
* 
* 巢狀結構問題
* 
* Atomic CSS 起手式
* 初期設計會先將可能用到的 class 先一次定義好
* 可讀性
* 
* 規則
* 
* 第三方工具 (將無使用到的 class 刪除)
* 
* 常用 Atomic CSS 框架
* 
* windi CSS
* 
* Tailwind JIT 模式
* 生成->掃描->打包
* 好用之處
* 
* 
* 
* 
* 
* plugin
* 封裝
* 
* 巢狀結構作法 - 用起來像 sass
* 
* 注意 CSS 肥大問題
* 
* Atributify Mode
* 
* 
* 
* 
* 不用去管 style 標籤
* 

* Uno CSS
* 
* 快速需要 demo 的專案
* 特點
* 
* 
* 
* 
* 定義規則
* 
* 
* 
* 無值屬性模式
* 
* 定義規則 - 正則表達式匹配
* 
* 
* 
* 問題與討論
* 新技術導入有困難，先向上去溝通，會比直接說服同事還要來的快一點
* 前提是: 開發自己的樣式，需要自己處理，往後效能測試才比較會直接導入 Atomic CSS
* 大公司或一個團隊是很難改變現狀的
* 改變環境
* 自己專案自我導入