上一篇文章讲述了如何为我们的按钮添加交互效果，目前来说效果看起来还是挺满意的。我把代码写成这样:
.simple-button {
color: #fff;
border: 0;
font-size: 18px;
outline: none;
padding: 5px 10px;
background: #ace;
border-radius: 4px;
/* 设置文字阴影 */
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
/* 设置盒子阴影 */
box-shadow: 0 4px 0 #9cb8d8, 0 3px 20px rgba(0,0,0,0.3);
/* 交互性 */
cursor: pointer;
}
.simple-button:active {
/* 按钮按下去之后周围的光源应该没那么强烈了，所以可以考虑适当减少阴影 */
text-shadow: 0 -1px 0 rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
position: relative;
top: 3px;
}
按钮的最终效果是这样
b.gif
现在实现的按钮已经可以满足我们的需求了。But有没有发现我的代码里面有太多太多的px单位，而且我们的按钮很大程度上来说是通过内容的行高来撑大的，这就有个问题了，现在我把font-size这个属性调整一下，我让我们的按钮变大(字体变大了内容的行高也会变大)。我就温柔点设置到50px好了。
font-size: 50px;
看看现在按钮变成什么样子？
Paste_Image.png
完全失去了原来的感觉了是不是? 完全没有了原来的比例了。要做成原来那种样子，并且还要放大按钮，我们便不得不对这一大堆的含有px 的属性进行调整。这种事情想想就是灾难。
有没有办法让我们的代码更灵活一些?我们可以改动最少的代码就能达到我们想要的效果？
IT 界面把这种代码称为DRY(Don't Repeat Yourself)。
OK，现在我们尝试对代码进行改动，我前面也说过了:
我们的按钮很大程度上是可以通过内容的行高来撑大的，而我们现在的行高是由内容的字体大小决定的，也就是说如果我们其他的使用了
px这个单位的属性值也能够受我们字体大小的影响，按比例进行调整，那我们不就可以解决这个问题了吗？
Awesome，现在我们请出em这个单位，对于制作可维护性高的组件，我个人是比较喜欢这个属性，它的作用是
根据当前标签的字体大小按比例设置对应的属性值， 说简单点它就是个缩放因子。
举个栗子，当我某个标签的font-size值是18px, 那么当前标签的0.5em其实就是18px * 0.5 = 9px。
我现在残忍一点，把除了font-size之外所有带px 的属性全部转换成用em来表示，代码就会变成下面这样子
.simple-button {
color: #fff;
border: 0;
font-size: 18px;
outline: none;
padding: 0.278em 0.556em;
background: #ace;
border-radius: 0.22em;
/* 设置文字阴影 */
text-shadow: 0 -0.056em 0 rgba(0,0,0,.3);
/* 设置盒子阴影 */
box-shadow: 0 0.22em 0 #9cb8d8, 0 0.167em 1.11em rgba(0,0,0,0.3);
/* 交互性 */
cursor: pointer;
}
.simple-button:active {
/* 按钮按下去之后周围的光源应该没那么强烈了，所以可以考虑适当减少阴影 */
text-shadow: 0 -0.056em 0 rgba(0,0,0,.1);
box-shadow: 0 0 0.556em rgba(0, 0, 0, 0.5) inset;
position: relative;
top: 0.167em;
}
代码改变之后我们的组件样式，其实跟之前看起来是几乎一样的。
Screen Shot 2017-03-24 at 4.52.14 PM.png
OK，那我现在展示一下这种写法的好处，我多建立几个button，来比较一下
<button class="simple-button">Hello World</button>
<button class="simple-button simple-button-md">Hello World</button>
<button class="simple-button simple-button-lg">Hello World</button>
我在样式下面添加下面代码，设置新的按钮的字体大小，以及按钮之间的间距
.simple-button {
margin-left: 30px;
}
.simple-button-md {
font-size: 30px;
}
.simple-button-lg {
font-size: 50px;
}
你觉得现在的效果是怎样?
finall.gif
yeah，这里做到了只改一行代码（字体大小），就能得到除了大小不同样式却几乎相同的组件了。或许我这种优化有点过度，或许这个实现在设计师眼中还是有些瑕疵(这些细节我们可以再调整)。但是这里我的目的是写出可维护性以及灵活性更高的代码，这个目的已经基本上达到了。
如果希望参考这个按钮的具体代码还有效果可以直接点击 codepen这个链接查看，这是国外的一个网站，可以很方便我们前端人员调试客户端代码。很多开发者会在上面分享一些优秀的作品(当然是开源的)。
实在抱歉一个“简单”的按钮说了这么多。很感谢你能看到这里
网友评论