1、引言
DRY：Don’t Repeat Yourself
DRY 的反面：是 WET， 它的意思是 We Enjoy Typing（我们喜欢敲键盘） 或 Write Everything Twice（同样的代码写两次）。
浏览器前缀：
每个浏览器都可以实现这些实验性的（ 甚至是私有的、 非标准的） 特性， 但要在名称前面加上自己特有的前缀。 最常见的前缀分别是 Firefox 的 -moz-、 IE 的 -ms-、 Opera
的 -o- 以及 Safari 和 Chrome 的 -webkit-。
最终写出的代码可能就是这样的：
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
这里面有两条声明是完全多余的： -ms-border-radius 和 -o-borderradius 这两个属性从来没有在任何浏览器中出现过， 因为 IE 和 Opera 从一开始就是直接实现 border-radius 这个无前缀版本的。
解决工具：
- 像 CSS3, Please!（ http://css3please.com） 和 pleeease（ http://pleeease.io/playground.html） 这样的网站允许你把无前缀的 CSS 代码粘贴进去， 它们会自动帮你把必要的前缀都加好。 这类网站是“前缀危机”所催生出的第一批工具， 很快就过气了， 因为跟其他方案相比，它们的使用成本太高了。
- Autoprefixer（ https://github.com/ai/autoprefixer） 采用 Can I Use...（ http://caniuse.com） 的数据库来判断哪些前缀是需要添加的； 此外，它是在本地完成编译的， 类似预处理器。
- 我自己开发的 -prefix-free（ http://leaverou.github.io/prefixfree） 会在浏览器中进行特性检测， 来决定哪些前缀是需要的。 它的好处在于几乎不需要更新， 因为其所有信息都是用一份属性清单在真实的浏览器环境中跑出来的结果。
- 类 似 Stylus（ http://stylus-lang.com/）、 LESS（ http://lesscss.org） 或Sass（ http://sass-lang.com） 的预处理器并不自带任何加前缀的方法，但很多人开发过一些能为常用属性加前缀的 mixin； 社区中也有一些库提供了这类 mixin。
2、尽量减少代码重复
在实践中， 代码可维护性的最大要素是尽量减少改动时要编辑的地方。 举例来说， 如果在放大一个按钮时需要在一堆规则中进行 10 处修改， 那就很可能会漏改其中某处， 当你在给别人善后时更是如此。 即使这些要修改的地方很明显， 或者最终可以找齐它们， 但你还是浪费了时间， 原本可以利用这些时间来做点更有意义的事情。
而且， 这还不仅仅是后期修改的问题。 灵活的 CSS 通常更容易扩展：在写出基础样式之后， 只用极少的代码就可以扩展出不同的变体， 因为只需覆盖一些变量就可以了。 让我们来看一个例子。
padding: 6px 16px;
border: 1px solid #446d88;
background: #58a 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;
这段代码在可维护性方面存在一些问题， 我们来一一修复。 最软的杮子应该是跟字体尺寸相关的部分了。 如果我们决定改变字号1（可能是为了生成一个更大、 更重要的按钮）， 就得同时调整行高， 因为这两个属性都写成了绝对值。
更麻烦的是， 行高并没有反映出它跟字号的关系， 因此我们还得做些算术， 算出字号改变之后的行高该是多少。 当某些值相互依赖时， 应该把它们的相互关系用代码表达出来。 在这个例子中， 行高是字号的 1.5 倍。 因此， 把代码改成下面这样会更易维护：
font-size: 20px;
line-height: 1.5;
既然跨出了这一步， 我们为什么还把字号定为绝对长度值呢？ 没错， 绝对值很容易掌控， 但每当你想要修改它们的时候， 它们都会回头反咬你一口。 比如说， 如果我们决定把父级的字号加大， 就不得不修改每一处使用绝对值作为字体尺寸的样式。 如果改用百分比或 em 单位就好多了：
font-size: 125%; /* 假设父级的字号是 16px */
line-height: 1.5;
现在， 如果我们改变父级的字号， 按钮的尺寸就会随之变化。 但是， 它看起来很不协调（ 参见图 1-5）， 因为所有其他效果都是为一个小按钮设计的， 并没有跟着缩放。 如果我们把这些长度值都改成 em 单位， 那这些效果的值就都变成可缩放的了， 而且是依赖字号进行缩放1①。 按照这种方法， 我们就可以在一处控制按钮的所有尺寸样式了：
padding: .3em .8em;
border: 1px solid #446d88;
background: #58a linear-gradient(#77a0bb, #58a);
border-radius: .2em;
box-shadow: 0 .05em .25em gray;
color: white;
text-shadow: 0 -.05em .05em #335166;
font-size: 125%;
line-height: 1.5;
现在我们的大号按钮看起来更像是一个原按钮的等比例放大版本了（参见图 1-6）。 请注意还有一些长度值是绝对值。 此时就需要重新审视到底哪些效果应该跟着按钮一起放大， 而哪些效果是保持不变的。 比如在这个例子中， 我们希望按钮的边框粗细保持在 1px， 不受按钮尺寸的影响。
不过， 让按钮变大或变小并不是我们唯一想要改动的地方。 颜色是另一个重要的变数。 比如， 假设我们要创建一个红色的取消按钮， 或者一个绿色的确定按钮， 该怎么做呢？ 眼下， 我们可能需要覆盖四条声明（ bordercolor、 background、 box-shadow 和 text-shadow）， 而且还有另一大难题：
要根据按钮的亮面和暗面相对于主色调 #58a 变亮和变暗的程度来分别推导出其他颜色各自的亮色和暗色版本。 此外， 若我们想把按钮放在一个非白色的背景之上呢？ 显然使用灰色（ gray） 作投影只适用于纯白背景的情况。
其实只要把半透明的黑色或白色叠加在主色调上， 即可产生主色调的亮色和暗色变体， 这样就能简单地化解这个难题了：
padding : .3em .8em ;border : 1px solid rgba ( 0 , 0 , 0 ,. 1 );background : #58a linear - gradient ( hsla ( 0 , 0% , 100% ,. 2 ),transparent );border-radius : .2em ;box-shadow : 0 .05em .25em rgba ( 0 , 0 , 0 ,. 5 );color : white ;text-shadow : 0 -.05em .05em rgba ( 0 , 0 , 0 ,. 5 );font-size : 125% ;line-height : 1.5 ;
button.cancel {background-color : #c00 ;}button.ok {background-color : #6b0 ;}
3、技巧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.btn {
padding: .3em .8em;
border: 1px solid rgba(0, 0, 0, .1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2),
transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .3);
font-size: 125%;
line-height: 1.5;
}
button.cancel {
background-color: #c00;
}
button.ok {
background-color: #6b0;
}
</style>
</head>
<body>
<input type="button" name="YES" id="btn" class="btn" value="YES">
</body>
</html>
摘抄自《CSS揭秘》，如有侵权，请联系。。。