前言

隨著專案的開發，為了實現響應式設計或元素中不同狀態的樣式套用，最終會讓元素類別標記越來越多，甚至在類別梳理或瀏覽時不易想像元素的呈現效果，Master CSS 為此提出了群組（Group），可以將多個特定狀態或響應式斷點的類別標記，以群組的方式集合起來，不僅能提高類別程式碼可讀性，也減少了冗長的程式碼類別。

任意屬性

在開始介紹 Master CSS 的群組功能前，簡單介紹一下任意屬性的標記方式。在撰寫類別標記時，你可以使用大括號 {}，來使用非標準或尚未支援的 CSS 屬性，例如有一個自定義或尚未被 Master CSS 標記所支援的 CSS 屬性 block-size:5rem，你就可以透過 {block-size:5rem} 來標記類別。

產生的 CSS：

.\{block-size\:5rem\} {
  block-size: 5rem;
}

群組（Group）標記

當使用 Master CSS 在元素中標記類別時，大括號 {} 除了可以用來標記任意屬性，也是使用類別群組（Group）功能的標記方式。

話不多說，看例子最直接，我們建立一個簡單的按鈕。

<button class="
  r:4 p:8|16 font:14
  bg:gray-90
  bg:blue-90:hover
  fg:blue-66:hover
  font:semibold:hover"
>
 按鈕
</button>

上面的例子，我們為了要處理滑鼠指標懸停，而添加 :hover 來套用一些樣式的變化，當滑鼠指標懸停在按鈕上時，背景、文字顏色與字體也將相應的做變化。

但你有想過，當我們需要處理的狀態或套用的樣式變多，例如 :focus 要添加外框，:active 要添加點擊效果，甚至是在不同的裝置視窗尺寸下，需要使用斷點被配合排版布局來設定樣式，那麼整個元素的類別名稱，將會非常的冗長，更別說這些類別可能穿插在各個狀態或斷點之間，使得閱讀與維護上變得的棘手。

當遇到這種情況，我們可以透過 Master CSS 所提供的群組功能，將各個狀態的樣式進行分組，相同狀態的放置在同一個大括號 {} 內，最後再添加上需要套用狀態就可以很有效的管理這些類別標記。

以上面同一個按鈕與樣式效果，我們使用群組的方式來進行重構。

<button class="
  r:4 p:8|16 font:14
  bg:gray-90
  {bg:blue-90;fg:blue-66;font:semibold}:hover
">
  按鈕
</button>

將需要在 :hover 狀態下套用類別，以大括號 {} 括起來，若有多個類別標記，則以分號 ; 進行分隔，如此就得到了群組 {bg:blue-90;fg:blue-66;font:semibold}，最後在群組外添加上要套用的狀態得到 {bg:blue-90;fg:blue-66;font:semibold}:hover 類別。

Master CSS 就會根據群組類別標記，自動幫我們產生相對應的 CSS 規則。

.\{bg\:blue-90\;fg\:blue-66\;font\:semibold\}\:hover:hover {
  background-color: rgb(224, 236, 254);
  color: rgb(120, 166, 242);
  font-weight: 600;
}

除了狀態偽類（Pseudo-classes）外，偽元素（Pseudo-elements）、媒體查詢等選擇器也都可以透過群組來做使用。

為了不同視窗尺寸撰寫的樣式類別，你可能建立出如下的元素與類別，類別名稱不僅混亂且不易識別與維護，。

<div class="block@md font:14@md font:18@lg font:semibold@lg text:center@md">…</div>

將具有相同響應式斷點的樣式進行群組，相同的視窗尺寸樣式便會在同一個分組。

<div class="{block;font:14;text:center}@md {font:18;font:semibold}@lg">…</div>

產生的 CSS

@media (min-width: 1024px) {
  .\{block\;font\:14\;text\:center\}\@md {
    display: block;
    font-size: 0.875rem;
    text-align: center;
  }
}

@media (min-width: 1280px) {
  .\{font\:18\;font\:semibold\}\@lg {
    font-size: 1.125rem;
    font-weight: 600;
  }
}

當然你也可以寫出更複雜的選擇器與媒體查詢來套用樣式。舉例來說，下列的程式碼：

<ul class="block>li:hover@md font:14>li:hover@md text:center>li:hover@md">…</ul>

同樣效果的類別名稱，透過類別群組的方式，不僅更好閱讀，程式碼的長度也減少許多。

<ul class="{block;font:14;text:center}>li:hover@md">…</ul>

產生的 CSS

@media (min-width: 1024px) {
  .\{block\;font\:14\;text\:center\}\>li\:hover\@md>li:hover {
    display: block;
    font-size: 0.875rem;
    text-align: center;
  }
}