Atomic CSS（ACSS）

不管是 Tailwind CSS、UnoCSS，都擁有一個概念——原子化 CSS（Atomic CSS），雖然你在 Master CSS 也能嗅到原子化 CSS 的味道，但 Master CSS 不只是在行內寫類別樣式，原子化 CSS 是一種 CSS 的架構方法，它的優點在於小型或單一用途的類別上，我們以看見的視覺效果為其命名，通常一個類別對應著一種樣式。

舉例來說，下方的類別，很直觀的可以理解為，顏色是黑色、字體大小是 16px、文字的風格是斜體（italic），我們可以很快的想象出其呈現的視覺效果。

<span class="color:black font:16px font:italic">Hello World</span>

Atomic CSS 一詞出自 Yahoo! 工程師 Thierry Koblentz 在 2013 年提出的 Challenging CSS Best Practices，從 Atomizer 到現在的 Tailwind，一直都在提升使用者體驗，Tailwind 雖然不是先驅，但靠著完整的規範與預設樣式，官方文件也挺齊全，很快就能找到自己所需要的語法，所以迅速的崛起。

再後來出現的 UnoCSS、Master CSS，更加強了 Tailwind 的一些不足與缺點，而 Master CSS 更是突破性的帶來了虛擬 CSS 的概念，讓整體使用上更加優秀。

行內樣式 (Inline styles)

想必，你也在標籤元素內的 style 寫過像這樣子的行內樣式吧！

<span style="color: black;font-size: 16px;font-style: italic;">Hello World</span>

在 style 我可以隨心所欲的添加樣式，優先權還不小，但你會發現到完整的 CSS 可能會帶來過於冗長及難以實現某些選取器或媒體查詢等功能。

Tailwind 透過規範，制定了一些語法與簡寫，讓你遵照著 text-lg 就是在設定較大的字體，甚至在顏色上，不再需要對應色碼有沒有相同，text-green-400 和 text-green-500 透過 400 和 500 數值的差異來描述顏色的深度，避免一些沒有規範的使用，大大的提升團隊開發上的程式碼一致性與規則。

行內樣式也不少的缺點，其中偽類（Pseudo-classes）的選擇與響應式（Responsive），更是致命的缺陷。

試想我們如果要實現滑入按鈕時，將按鈕變色該如何使用 CSS 實踐？

我想這對多數前端工程師來說並不會太困難，不就是使用 :hover 嗎？那如果換作行內樣式能直接使用嗎？不能，甚至要實現還可能得倚靠 JaveScript 的 onmouseover 與 onmouseout 來實現，不僅難以維護又不夠優雅。這還只是一個偽類能使用 JaveScript 實現，那 :focus 或 :first-child 等等該怎麼選取套用樣式？

現代網頁不僅要支援各式各樣的裝置與螢幕大小，響應式（Responsive）已經成為一個基本中的基本了。試想在行內樣式內我能直接依據不同的視窗尺寸來配置不同的樣式嗎？

標記驅動（Markup-driven）

Master CSS 的樣式是藉由模板標記來驅動，並依據需要自動產生 CSS 的規則，這也正是 Master CSS 的一大特色。

現在你只需要使用 Master CSS 的語法就可以做到。

偽類（Pseudo-classes）

套用樣式到 :hover 與某個節點下 > 的第一個子元素 :first-child。

<button class="fg:blue-55:hover">按鈕</button>

<div class="color:blue-55>:first-child">
    <span>第一行</span>
    <span>第二行</span>
</div>

響應式（Responsive）

在視窗最小寬度符合 1024px（@md）的情況下，將字體設定為 20px。

<span class="font:16 font:20@md">Hello World</span>

Tailwind、UnoCSS 和 Master CSS 都是能解決上述這些行內樣式的問題而創造出來的原因之一，Master CSS 能做到的甚至更多元。你可能會說在 style 寫樣式也就算了，竟然還敢在 class 玩這些花裡胡哨的東西，class 不是給你這樣搞的，但其實在 class 內寫樣式並不是違反規則，而是突破既有框框來讓開發更有效率。之後若有人問說為什麼不寫行內樣式，你也可以舉幾個例子與缺點給他知道，甚至推薦他使用 Master CSS。