類別名稱的可讀性

Master CSS 是將樣式以類別名稱撰寫寫在 class 內，然而當需要設定樣式一多的話，仍無法避免類別名稱過於冗長及難以判讀的可能性，但 Master CSS 透過、縮寫（abbreviation）、**速記簡寫（shorthand）與群組（group）**有效的降低過於冗長的問題，這是傳統 style 與部分 ACSS 的弱勢。

首字母縮略詞

使用幾個 CSS 語法單詞或相關語法詞句的首字母（第一個字母）或前綴，來合併成簡寫與縮寫進而組合成一個新字，也就是說，對於某些樣式，Master CSS 提供簡寫與縮寫的語法來表示，原本你可能寫出下程式碼：

<p class="font-size:1rem z-index:100 order:2">...</p>

你也可以嘗試使用縮寫詞來降低整體類別名稱的長度：

<p class="f:16 z:100 o:2">...</p>

速記簡寫

當不使用簡寫來設定 padding 與 border，原本你可能寫出下程式碼：

<p class="padding-top:1rem padding-bottom:1rem padding-left:2rem padding-right:2rem border-width:.0625rem border-color:red border-style:solid">...</p>

你也可以嘗試使用簡寫來降低整體類別名稱的長度：

<p class="padding:16|32 border:1|solid|red">...</p>

使用首字母縮略詞規範的速記簡寫，能將類別長度減少至極致：

<p class="p:16|32 b:1|solid|red">...</p>

偽類與偽元素的樣式套用

在 style 上我們很難優雅的去實現如 :hover 這類滑入更改樣式的偽類套用樣式，在偽元素的選擇 ::before 也毫無辦法。

但當我們使用 Master，不僅在 :hover 或 :foucs 甚至支援使用 _ 選擇目標下的元素或節點。

<button class="fg:blue-55:hover bg:gray-85:focus font:heavy_i">
    <i>X</i>
    <span>關閉</span>
</button>

在偽元素的選擇，我們可以很輕易透過 :before 和 :after 的設定貨幣類型與單位。

<span class="content:'NT$':before content:'元':after">16,888</span>

媒體查詢

我們開發中最常用的媒體查詢應該就是響應式設計 （Responsive Web Design, RWD） 了，當我們要設定斷點套用樣式，不管在 style 或 class 都是無法直接把規則 @media 放置在內，自然也就無法直接使用，但 Master CSS 引擎，透過解析下列程式碼：

<div class="grid grid-cols:2 grid-cols:4@md grid-cols:8@xl">
    ...
</div>

我們很輕易的就能在視窗最小寬度符合 1024px（@md）的情況將 grid-cols 設定為 4；在視窗最小寬度符合 1440px（@md）的情境將 grid-cols 設定為 8。

產生的 CSS 規則如下：

.grid {
	display: grid
}

.grid-cols\:2 {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr))
}

@media (min-width:1024px) {
	.grid-cols\:4\@md {
		display: grid;
		grid-template-columns: repeat(4,minmax(0,1fr))
	}
}

@media (min-width:1440px) {
	.grid-cols\:8\@xl {
		display: grid;
		grid-template-columns: repeat(8,minmax(0,1fr))
	}
}

Master CSS 引擎使用的匹配演算法做得非常的智慧，基本上所有的樣式都 支援響應式的斷點，甚至不用考慮斷點順序的問題，Masrer CSS 都能依據斷點和使用範圍將媒體規則正確的排序。