為什麼 Master CSS

前端的框架與工具推進得很快，不論是在開發上體驗的或是部署上與效能的提升，其實每個框架、函式庫及工具的誕生都是為了解決一些痛點。

寫 CSS 會面臨到的一些痛點

過早的抽象化

我們想要為設計一個卡片可能會將編寫的風格來命名類別，以下圖為例：

舉例來說，我們將卡片樣式以類別名稱進行抽象化

<div class="card">
    <img class="card-image" src="/static/media/mountain.jpg" alt="Mountain" />
    <div class="card-content">
        <div class="card-title">Mountain</div>
        <div class="card-text">A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock.</div>
    </div>
</div>

我們為其類別撰寫 card.css

.card {
    display: flex;
    background-color: white;
    transition: transform 0.2s ease 0s;
    overflow: hidden;
    border-radius: 0.625rem;
}
 
.card:hover {
    transform: translateY(-0.3125rem);
}
 
.card-image {
    object-fit: cover;
    width: 8.75rem;
    aspect-ratio: 1 / 1;
}
 
.card-content {
    padding: 1.5625rem;
}
 
.card-title {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: calc(1.125rem + 0.875em);
}
 
.card-text {
    font-size: 0.875rem;
    line-height: calc(0.875rem + 0.875em);
    overflow: hidden;
    display: -webkit-box;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

我們常常很有自信的覺得類別以後一定會重複使用到，但其實不然，往往在開發上我們很難確定這個樣式類別到底是否能被重用，甚至很多情況是只為了應付一兩項的字型大小與顏色的規則微調，更暴力的是複製貼上想要重複的樣式在每個元件中。

管理與命名地獄

我們要為一個樣式命名，其實就是在做抽象化或模組化，而這些方法也有人訂好了規範可以遵守，例如 OOCSS、SMACSS 或 BEM 等，存在的目的都是為了讓程式碼更好懂、更好複用，進而提高生產效率與降低維護成本。

承上一個段落，我們製作了一系列的的卡片風格名為 card，某天 PM 出現要求支援另一種卡片風格做呈現：

新的卡片設計稿出來後，我們也開始思考，如果我們需要對這張卡片的 card 樣式進行一些小調整，其他卡片有使用到相同的樣式嗎？影響層面會不會使我們會不會越改越糟？還是說是否需要建立另一個名稱？

更多的問題也開始慢慢浮現．．．．．．

• 我們怎麼為這張新的卡片命名，類別名稱 card 使用過了，該怎麼辦呢？
• 是否有使用到約定來得出名稱 card-text？已經被大家所接受了嗎？
• 新的類別命名間接導致原本定義的卡片樣式可能就無法重複使用。
• 在 HTML 和 CSS 之間來回切換比對編輯，耗費了大量的時間！
• 編輯時還發現有其他使用了 card-text，但它們不是卡片！
• 這是遵循著最佳實踐嗎？我想應該是自己的最佳實踐吧！
• 等問題…

等到你終於完成了這次的新卡片樣式，後續維護管理及二次開發會發生什麼問題？

• 這個卡片添加了什麼屬性、選取器或媒體查詢？我會不會重複實作了？
• 這個卡片所定義的樣式存在哪個 CSS 檔？會不會分散在多個檔案內？
• 這些分散的 CSS 檔案，是不是可能對卡片增添了額外的 CSS 規則？
• 這個卡片最終合併計算出來的外觀如何？需要加 !important 嗎？
• 我要直接修改這個 card 嗎？會不會改爆其它地方的卡片呢？
• 這個卡片需要增加其它 CSS 規則，好像得新增類別來修改。
• 這個卡片不需要了，相關 CSS 規則要刪除。怎麼還有殘留？
• 這個人的命名怎麼這麼噁心🤮，結果發現是自己．．．

這些過程只是發生在一個卡片樣式而已，想想一個專案好多好多的元件，不就要改到吐血。

時間成本

所有的痛點與缺點進而反應的就是成本，不論是時間或是金錢，新玩意需要學習時間，曲線高更難短時間掌握。傳統方式在維護專案翻找 CSS 與評估影響都很容易浪費掉額外的時間，考慮的周不周全所帶來的都是影響時間的因素。

Master CSS 改變了什麼？

如何有效率的開發來提高生產力，所謂「工欲善其事，必先利其器」，除了自身的經驗外，能輔助開發的工具也非常重要，Master CSS 讓你不需萬物都抽象化，Master CSS 並不是要反對傳統的抽象撰寫風格，而是推崇——語法第一，語意第二，避免過早的抽象化，讓你想調什麼就調什麼，不需要花費大量時間翻查文件找類別別名，想寫什麼樣式就直接寫在 class。

傳統的 CSS 或使用別人的介面元件很常遇到一些優先級的問題，想想那些 !important，改的了還是小，怕的是前人已經用了，難不成我還要 important 你的 important 嗎？隨著專案擴展，這些複雜與不可預測性可能使得專案很快就變得難以管理，嚴重影響生產力。

讓我們看看前面兩個卡片使用 Master CSS 撰寫是怎麼樣子：

<div class="flex translateY(-5):hover ~transform|.2s overflow:hidden bg:white r:10">
    <img class="object:cover w:140 aspect:1" src="/static/media/mountain.jpg" alt="Mountain" />
    <div class="p:25">
        <div class="font:semibold text:18">Mountain</div>
        <div class="text:14 lines:2">A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock.</div>
    </div>
</div>

<div class="flex flex:column translateY(-5):hover ~transform|.2s overflow:hidden bg:white r:10">
    <img class="object:cover aspect:16/9" src="https://beta.css.master.co/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmountain.b86f039c.jpg&w=256&q=75" />
    <div class="p:25">
        <div class="font:semibold text:18">Mountain</div>
        <div class="text:14 lines:2">A mountain is an elevated portion of the Earth's crust, generally with steep sides that show significant exposed bedrock.</div>
    </div>
</div>

相比之下，Master CSS 提供了一種扁平的方法來在標籤元素上套用樣式，避免 CSS 彼此污染與糾纏，我們將能更快的實踐各式各樣的設計。

當然，如果你有需要，仍然可以將重複使用的元件樣式進行抽象化，Master CSS 也提供自訂抽象類別的設定。

Master CSS 的優缺點

優點

• 不再需要建立 CSS 檔案，專注在 HTML 與標籤的類別上
• 不再需要花時間想類別名稱及抽象類別上
• 學習成本非常低，只要會寫 CSS 一定能快速上手，照著寫就對了！
• 非常輕量，包含 JIT 即時編譯少於 20KB（這邊描述的比較保守，等待公開測試後實際肯定更小）
• 無須複雜的設置，極低的導入成本，甚至不需要依賴打包與建構工具（webpack、gulp 和 postcss）

缺點

• 當有複用的樣式想要抽象化類別，需要額外定義。雖然麻煩但也還算簡單。
• 當元件的樣式比較複雜，類別標籤容易因樣式而讓類別名稱過多，進而導致可讀性差的問題。在偽類或媒體查詢更容易發生，例如滑入樣式的改變，RWD 要不同的樣式。但 Master CSS 有群組的功能可以解決這類的問題。
• 虛擬 CSS 引擎的核心是透過 JavaScript 驅動的，所以在不允許 JavaScript 的瀏覽器會無法使用，但是若透過靜態提取來產生出 CSS 就不再強制需要 JavaScript。

許多人認為 HTML 和 CSS 就應該分開寫，就好像 JSX 混合 HTML、CSS 及 JS 違背了關注點分離 (SoC)，但我相信這些不一定是你在意的，而且並不會帶來不便，對我來說，應該聚焦的重點是元件化的過程、開發上的體驗與生產力的提升，相信 Master CSS 能夠勝任也可能成為下一個的潮流，現在，就開始使用 Master CSS 吧！