1. 提取專門的顏色類名：
.dark { color: #33373d; }
.gray { color: #969ba3; }
.blue { color: #4284ed; }
.green { color: #7ed321; }
.orange { color: #f0643a; }
.yellow { color: #f0c53a; }
.purple { color: #a091ff; }
.red { color: #ed424b; }
.white { color: #fff; }
然后，建議放在所有公用樣式的最底部。
2. 靜態UI組件所有動態顏色全部走原生變量
例如，border邊框色默認就是color屬性的顏色，因此，寫border時候，顏色值可以直接缺省，直接：
.btn-normal { border: 1px solid; }
對于背景色，我們可以走CSS的currentColor
變量。
.btn-normal { background-color: currentColor; }
注意，和傳統實現不一樣，我們這里直接指定了背景色，但是是以currentColor變量的形式，也就是背景色和我們的文字顏色保持一致。
沒錯，按鈕的文字顏色確實不能和背景色一樣，但是，由于通常按鈕上的文字都只有一行，于是，注意，本文最精華部分來了——考慮到按鈕上的文字都是白色，因此我們可以這樣處理：
.btn-normal::first-line {
color: #fff;
}
3. 顏色類名既扮演狀態類名角色又扮演顏色控制角色
<a href="" class="btn-normal red">紅色按鈕</a>
<a href="" class="btn-normal blue">藍色按鈕</a>
<a href="" class="btn-normal green">綠色按鈕</a>
有人詢問hover態和active態該如何處理，可以使用box-shadow內陰影，或者使用background-image漸變，如下CSS：
.btn-normal:active {
background-image: linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
}
