在 「Day 02 - 避免過早抽象化」 這個單元裡，有介紹到應該盡量避免過早幫元素抽象化命名，因為會導致我們在 "不確定的狀況下" 設置了 "不精準的樣式"，但如果是 "具有重用潛力" 的樣式組合，那仍然建議將其抽象化命名以簡化程式碼，下面就讓我們來了解如何自定義類名。
在自定義配置之前，需要在 head 中加入這一段程式碼，目的為防止自動初始化以及重新渲染。
<head>
<script>
window.MasterCSSManual = true;
</script>
...
</head>
舉個例子，下面的按鈕樣式可能在很多地方都有使用到。
<button class="inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4" type="button">Submit</button>
這個時候就可以將其抽象化命名為 btn 以重用樣式。
<button class="btn" type="button">Submit</button>
Master CSS 自定義配置的程式碼如下，將 extend 裡的第一個參數設定為 classes，代表要自定義的屬性是類名，物件裡面的 key 對應的是類名 btn，value 對應的是樣式組合 inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4。
const Style = window.MasterStyle;
// 自定義配置
Style.extend('classes', {
btn: 'inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4'
});
window.initMasterCSS();
上面的程式碼能讓我們在一般的 HTML 檔案裡配置，Master CSS 也有提供 import 的方式：
import { init, Style } from '@master/css';
// 自定義配置
Style.extend('classes', {
btn: 'inline-flex center-content font:14 font:semibold font:white bg:indigo px:18 h:40 r:4'
});
init();
完成後查看編譯出來的 CSS 規則，會發現每個屬性後面都多出了一個 .btn，這會導致輸出的大小迅速增加，因此我們應該盡量 "避免過度抽象化"。
.inline-flex, .btn {
display: inline-flex;
}
.center-content, .btn {
justify-content: center;
align-items: center;
}
.font\:14, .btn {
font-size: 0.875rem;
}
.font\:semibold, .btn {
font-weight: 600;
}
.font\:white, .btn {
color: rgb(255, 255, 255);
}
.bg\:indigo, .btn {
background-color: rgb(90, 91, 213);
}
.px\:18, .btn {
padding-left: 1.125rem;
padding-right: 1.125rem;
}
.h\:40, .btn {
height: 2.5rem;
}
.r\:4, .btn {
border-radius: 0.25rem;
}
在自定義配置之前，需要將下面這段程式碼寫入 head 中，目的為防止自動初始化以及重新渲染。
<script>
window.MasterCSSManual = true;
</script>
iThome鐵人賽
看影片追技術