基于CSS color属性的静态UI组件重构策略

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));
}