因为本篇文章就是从这本书里搬过来的
最后，是可维护性的基本要素
尽量减少改动时要编辑的地方
愉快的开始 好，先上代码：
html
<div class="box"> <input class="btn" type="button" value="YES!" ></div> css
.btn { padding: 6px 16px; border: 1px solid #446d88; background: #59a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray; color: white; text-shadow: 0 -1px 1px #335166; font-size: 20px; line-height: 30px; } 这里呢，我们绘制了一个按钮
假如，当然，假如的情况有很多。
我就是觉得这个按钮太小，小到都看不到阴影在哪儿
那怎么办呢
好办啊
把按钮变大不就好了
的确是个好办法
但是你有没有考虑过
要想等比例变大按钮，至少要修改
paddingborder-radiusbox-shadowtext-shadowfont-sizeline-height 我的天啊
然而，更可怕的是你还要一点点调试各个属性值
那么
我们有没有另外一种，只通过一行代码来实现自动修改其他五个属性的写法呢
聪明的你，可能已经想到一个计量单位
em
对，相对值
这是改进的css代码
.btn { padding: .4em 1em; border: 1px solid #446d88; background: #59a linear-gradient(#77a0bb, #58a); border-radius: .25em; box-shadow: 0 .06em .3em gray; color: white; text-shadow: 0 -.06em .06em #335166; font-size: 1.25em; line-height: 1.5; } 关于em
em有如下特点：
1. em的值并不是固定的
2. em会继承父级元素的字体大小
所有浏览器的默认字体都是16px
根据me值的计算公式
1 ÷ 父元素的font-size × 需要转换的像素值 = em值
得出
1px=0.0625em
这里，我们可简化em的换算值，但不推荐这样做，因为会影响px的实际值和那些不完全以em作为布局的页面
css
.box{font-size:62.5%;}/* 在父元素上把px和em的换算变为 1px=0.1em别忘了，em会承父级元素的字体大小 */.btn {padding: .6em 1.6em;border: 1px solid #446d88;background: #59a linear-gradient(#77a0bb, #58a);border-radius: .4em;box-shadow: 0 .1em .5em gray;color: white;text-shadow: 0 -.1em .1em #335166;font-size: 2em;line-height: 1.5;} 好了，这样你就可以，与所欲为的比例放大按钮了
一行代码
font-size: 10em; 超大按钮
更加愉快的继续 不过，让按钮放大不是我们唯一要做的事情，这并不是最重要的
还有颜色
如果，我想一个红色的按钮，一个黄色的按钮
不考虑相对于主体色的亮色和暗色的搭配的情况下
一想到
又要亲自操刀，修改
boder-colorbackgroundlinear-gradientbox-shadowtext-shadow 你一定又开始头疼了
如何愉快的继续下去呢
这里需要一些小小技巧
并且还考虑到了相对于主体色的亮色和暗色的搭配
利用，透明
只要把半透明的黑色或白色叠加到主色调上，就会产生主色调的亮色和暗色的变体
二次改进的css代码
.btn { padding: .4em 1em; border: 1px solid rgba(0,0,0,.1); background: #59a linear-gradient(rgba(255,255,255,0.1), transparent ); border-radius: .25em; box-shadow: 0 .06em .3em gray; color: white; text-shadow: 0 -.06em .06em #335166; font-size:10em; line-height: 1.5; } 现在，依旧，一行代码
background: red 大红的按钮
愉快的结束吧 至此，我想大家对如何写出可维护的css有自己独特的理解。
分析代码，找出相关联系 尝试设计模式 严格遵循代码规范（Bootstrap 编码规范） css代码组件/模块化 使用具有编程思想的sass，less 多了解，优秀设计者的开源项目（GitHub 码云） 多思考