Master CSS 在標記類別名稱時，除了可以使用原生的語法外，你也可以透過縮也與簡寫來標記類別樣式，例如要使用彈性盒子時，你可能會使用 CSS 建立 display: flex;，而在 Master CSS 中你可以使用下列幾種方式來進行標記，都可以達到相同的效果。

• display:flex
• d:flex
• flex

產生的 CSS

.display\:flex {
  display: flex;
}

.d\:flex {
  display: flex;
}

.flex {
  display: flex;
}

這種標記 Flexible Box 彈性盒子的簡寫方式，是基於歧異關係來建立的，Master CSS 將原先表達帶有歧異的關鍵字，透過組合消除歧異，也就是說不在摸稜兩可，d:flex 與 flex 是指設定 display:flex；而像 text:center 也能知道是在設定文字置中對齊 text-align:center。

除了歧異組合關鍵字外，其中還要一項重要的就是語意（Semantics），你可以透過 Master CSS 的標記 block 與 abs 等只有單一個關鍵字來設定類別樣式，但也不難推測出是要設定 display:block 與 position:absolute，這就是因為使用的標記關鍵字具有語意（Semantics），所以我們可以更容易的推測類別標記。

例如原本需要撰寫如下的程式碼

<p class="text-transform:capitalize position:absolute display:block border-radius:50%">...</p>

你可以透過 Master CSS 所提供的語意類別，來減少類別名稱的長度，除了降低類別標記的複雜性，也能因為不失去所代表的意義而提高可讀性。

<p class="capitalize abs block round">...</p>

許多 CSS 框架中，也提供了不少類似的簡寫方式，但如果設計不良雖然類別名稱很短，但也讓使用者學習成本增加，導致要語意不語意，甚至要推論出所代表的意思或數值都還可能需要查表，這樣就違背了原先設計的理想情況。

自定義語意類別

Master CSS 預設已經存在許多不大會產生衝突且帶有語意的簡寫類別標記，規則上也都有跡可循，當然如果你想要擴展更多帶有語意的類別，或調整成你或團隊成員可以理解的語意簡寫，那麼也可以透過自訂的方式來建立更多的語意類別。

修改 Master CSS 的設定檔案（master.css.ts 或 master.css.js）

export default {
  semantics: {
    show: {
      display: 'block'
    },
    'hide-text': {
      'font-size': 0
    }
  }
}

你就可以在 HTML 中使用這個標記

<div class="show hide-text" hidden></div>

產生的 CSS

.show {
  display: block;
}

.hide-text {
  font-size: 0px;
}

自定義屬性值

Master CSS 除了可以自定義類別與媒體查詢外，也可以針對 Master CSS 的類別建立屬性值的標記，提供代替數值的標記語法。

修改 Master CSS 的設定檔案（master.css.ts 或 master.css.js）

export default {
  variables: {
    '2x': 32,
    '3x': 48
  }
}

你就可以在 HTML 中使用這個標記

<div class="font:2x font:3x@md">Master CSS</div>

產生的 CSS

@media (min-width: 768px) {
  .font\:3x\@md {
    font-size: 3rem;
  }
}

.font\:2x {
  font-size: 2rem;
}