Day 30 - 是結束也是開始 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 30

自我挑戰組

掌握 Master CSS 優化開發體驗系列第 30 篇

Day 30 - 是結束也是開始

14th鐵人賽 master css

秘密基地

2022-10-13 10:37:23

726 瀏覽

分享至

心得

很高興第一次參加 iThome 鐵人賽可以順利完賽，這裡要特別感謝 Master CSS 的作者 Aron，在開賽前期給予我很多建議及方向，讓我對於整個單元的規畫更清楚，這三十天每天都花了蠻多的時間在撰寫文章，因此過得非常的充實，這次會選擇 Master CSS 當作主題，是因為實際導入專案後發現蠻多優點的，非常推薦大家也來體驗這套虛擬的 CSS 語言，以下是我個人對於 Master CSS 的小小心得。

載入方式非常簡單，只要引入 Master CSS 的核心 JavaScript，即可使用所有功能。
全程專注在 HTML 架構上面，幾乎不會寫到任何的 CSS。
針對設計稿給予相對應的類名，就能快速建構出用戶介面。
不再盲目地將樣式分散在 CSS 檔案，協作人員能更快上手專案。
可以直接在元素上面應用偽類、偽元素、選取器、響應式斷點等實用功能。
需要具備一定的手刻能力以及對 CSS 的理解，再去使用 Tailwind CSS 或 Master CSS 這類工具，才能真正體會到其優勢。
因為其特性是將屬性直接寫在 class 裡面，容易導致類名過長，這個時候規劃 CSS 的屬性順序就十分重要。

為什麼會從 Tailwind CSS 轉來 Master CSS？

自己其實已經用了 Tailwind CSS 一段時間了，由於公司的開發環境比較舊，只能引入 1.9 版本的 Tailwind CSS，除了一開始就需要載入數十萬行的 CSS 外，也沒有最關鍵的 JIT 功能，因此在開發的時候，每當有一個單位是 Tailwind CSS 本身預設沒有的，就需要花大量的時間去 tailwind.config.js 設定參數再重新編譯，累積下來是時間是很可觀的。

相比下來，Master CSS 只需要載入其核心 JavaScript 就可以開始使用，對於一些舊的開發環境是相對友善的，其優點上面已經列舉蠻多項了，這邊就不再贅述。