語意

我們可以直接在元素上面寫 CSS，但這樣子寫會充斥著單位及各種 CSS 語法標記，因此這並不是 Master CSS 的本意。

<a class="
  display:block
  font-style:italic
  aspect:1/1
  border-radius:50%
  width:100%
  height:100%
  position:relative
  visibility:invisible
  isolation:isolate
">
</a>

Master CSS 設計了更合理的語意化類名，通過這種方式，降低類名的複雜性並提高了可讀性，同時保留了語意。

display:block ⇒ block
font-style:italic ⇒ italic
aspect:1/1 ⇒ square
border-radius:50% ⇒ round
width:100% height:100% ⇒ full
position:relative ⇒ rel
visibility:invisible ⇒ invisible
isolation:isolate ⇒ isolate

<a class="block italic square round full rel invisible isolate"></a>

速記

可以看到下面的 class 重複性高且充斥著單位。

<p class="
  padding-top:1rem
  padding-bottom:1rem
  padding-left:2rem
  padding-right:2rem
">
  ...
</p>

那這段程式碼要如何優化呢？我們先將相同屬性的 padding 透過 | 符號組合起來，| 符號代表 CSS 屬性值之間的空格，使每個值具有單獨的含意 padding:1rem|2rem|1rem|2rem，對應的方向是上 | 右 | 下 | 左。

上下值一樣、左右值一樣，可以再精簡成 padding:1rem|2rem，對應的方向是上下 | 左右。

1rem 轉換為 16px、2rem 轉換為 32px，而 Master CSS 會自動幫我們做單位轉換，因此我們可以不需要寫單位 padding:16|32。

最終我們將這一長串的 class padding-top:1rem padding-bottom:1rem padding-left:2rem padding-right:2rem 優化成 padding:16|32，是不是簡短許多呢？

<p class="padding:16|32">...</p>

首字母縮略

Master CSS 允許我們將某些特定屬性進行首字母縮略：

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

padding:16|32 ⇒ p:16|32
border:1|solid|red ⇒ b:1|solid|red
z-index:999 ⇒ z:999

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

總結

本日 codepen 連結

Master CSS 設計了一系列的語法糖（語意、速記、首字母縮略 ...），使我們在編寫樣式時的程式碼能夠更精簡。

參考

• Master CSS 官網 - 基本用法