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. 靜態(tài)UI組件所有動態(tài)顏色全部走原生變量
例如护盈，border邊框色默認(rèn)就是color屬性的顏色，因此羞酗，寫border時候腐宋，顏色值可以直接缺省，直接：
.btn-normal { border: 1px solid; }
對于背景色檀轨，我們可以走CSS的currentColor
變量胸竞。
.btn-normal { background-color: currentColor; }
注意，和傳統(tǒng)實現(xiàn)不一樣参萄，我們這里直接指定了背景色卫枝，但是是以currentColor變量的形式，也就是背景色和我們的文字顏色保持一致讹挎。
沒錯校赤，按鈕的文字顏色確實不能和背景色一樣，但是筒溃，由于通常按鈕上的文字都只有一行马篮，于是，注意怜奖，本文最精華部分來了——考慮到按鈕上的文字都是白色浑测，因此我們可以這樣處理：
.btn-normal::first-line {
color: #fff;
}
3. 顏色類名既扮演狀態(tài)類名角色又扮演顏色控制角色
<a href="" class="btn-normal red">紅色按鈕</a>
<a href="" class="btn-normal blue">藍(lán)色按鈕</a>
<a href="" class="btn-normal green">綠色按鈕</a>
有人詢問hover態(tài)和active態(tài)該如何處理，可以使用box-shadow內(nèi)陰影歪玲，或者使用background-image漸變迁央，如下CSS：
.btn-normal:active {
background-image: linear-gradient(to top, rgba(0, 0, 0, .05), rgba(0, 0, 0, .05));
}
