---
# System prepended metadata

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

---

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

## 09:30 ~ 10:20

* ![](https://i.imgur.com/gvMHoXl.png)
    * ![](https://i.imgur.com/BeGq9Dr.png)
    * ![](https://i.imgur.com/xQPTUWL.png)
        * BEM | OOM 命名方式
* Atomic CSS
    * ![](https://i.imgur.com/fFHB74T.png)
    * ![](https://i.imgur.com/VodS8zH.png)
    * ![](https://i.imgur.com/8EQDVNs.png)
    * 較適用於像是平台頁面設計
    * 避免產生重複性命名內容
    * 初期需要準備大量的 class，適用於一頁式網頁
    * 可花較少時間設計命名 (好處)
        * ![](https://i.imgur.com/IQnFQe5.png)
        * 巢狀結構問題
            * ![](https://i.imgur.com/HL1s1CS.png)
* Atomic CSS 起手式
    * 初期設計會先將可能用到的 class 先一次定義好
    * 可讀性
        * ![](https://i.imgur.com/Mr3zWZc.png)
    * 規則
        * ![](https://i.imgur.com/c8wP5C6.png)
    * 第三方工具 (將無使用到的 class 刪除)
        * ![](https://i.imgur.com/0YH8R0M.png)
* 常用 Atomic CSS 框架
    * ![](https://i.imgur.com/701zR9g.png)
* windi CSS
    * ![](https://i.imgur.com/ZKd3pDa.png)
    * Tailwind JIT 模式
    * 生成->掃描->打包
    * 好用之處
        * ![](https://i.imgur.com/QR28KDg.png)
        * ![](https://i.imgur.com/eDBI3Uu.png)
        * ![](https://i.imgur.com/aAoTBKq.png)
        * ![](https://i.imgur.com/QKAPfw3.png)
        * ![](https://i.imgur.com/6NtSvId.png)
        * plugin
        * 封裝
            * ![](https://i.imgur.com/eqyVYDQ.png)
        * 巢狀結構作法 - 用起來像 sass
            * ![](https://i.imgur.com/2NX4bsE.png)
            * 注意 CSS 肥大問題
        * ![](https://i.imgur.com/SFjBcUz.png)
    * Atributify Mode
        * ![](https://i.imgur.com/qzNEXXu.png)
        * ![](https://i.imgur.com/MzIqmJ5.png)
        * ![](https://i.imgur.com/PqEFils.png)
        * ![](https://i.imgur.com/Dtc5JRG.png)
    * 不用去管 style 標籤
        * ![](https://i.imgur.com/ZuiRQOQ.png)

* Uno CSS
    * ![](https://i.imgur.com/JNzXE9G.png)
    * 快速需要 demo 的專案
    * 特點
        * ![](https://i.imgur.com/QFzDmp6.png)
        * ![](https://i.imgur.com/OeJck5Y.png)
        * ![](https://i.imgur.com/8Ix0UL3.png)
        * ![](https://i.imgur.com/YvmXYyW.png)
        * 定義規則
            * ![](https://i.imgur.com/g8RO147.png)
        *  ![](https://i.imgur.com/Sg1i1Kp.png)
        *  ![](https://i.imgur.com/iFGTHlL.png)
        *  無值屬性模式
            *  ![](https://i.imgur.com/ET8NKFN.png)
        *  定義規則 - 正則表達式匹配
            *  ![](https://i.imgur.com/ourAKRI.png)
            *  ![](https://i.imgur.com/1YqUI2r.png)
            *  ![](https://i.imgur.com/DN0ssWS.png)
*  問題與討論
    *  新技術導入有困難，先向上去溝通，會比直接說服同事還要來的快一點
    *  前提是: 開發自己的樣式，需要自己處理，往後效能測試才比較會直接導入 Atomic CSS
    *  大公司或一個團隊是很難改變現狀的
        *  改變環境
        *  自己專案自我導入










