减少重复代码
更改大小
font-size: 20px;
line-height: 30px;
padding: 6px 16px;
改进：（1）将需要同步改变大小的属性值单位用相对属性代替，如em。这时大小就会更具font-size的变化而变化。（2）line-height根据倍数随着字体大小改变
font-size: 2em;
line-height: 1.5;
padding: .3em .8em;
改变颜色
如果想改变颜色，可能要覆盖border、color、background、box-shadow和text-shadow的属性值。对于阴影和边框，只需把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体：
text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0,0%,100%,.2),transparent);
box-shadow: 0 .05em .25em rgba(0,0,0,.5);
现在只要覆盖 background-color 属性，就可以得到不同颜色版本的按钮：
.cancel{
background-color:sienna;
}
.ok{
background-color:yellowgreen;
}
继承
比如在写提示框的箭头时，可以用inherit来继承父元素的样式：
.textTip{
position: relative;
margin-top: .5em;
padding: .4em;
background:wheat;
border: 1px solid tan;
color:white;
border-radius: .4em;
}
.textTip::before{
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom: 0;
transform: rotate(45deg);
}
代码易维护与代码量少
border-width: 10px 10px 10px 0;
如果要更改多个位置，上面的写法会比较麻烦；而下面的写法易于维护，并容易看懂：
border-width: 10px;
border-left-width: 0;
响应式页面
我们的思路是尽最大努力实现弹性可伸缩的布局，并在媒体
查询的各个断点区间内指定相应的尺寸。当网页本身的设计足够灵活时，让 它变成响应式应该只需要用到一些简短的媒体查询代码：
- 使用百分比长度来取代固定长度。如果实在做不到这一点，也应该
尝试使用与视口相关的单位（vw、vh、vmin 和 vmax），它们的值解析为视口宽度或高度的百分比。 - 当你需要在较大分辨率下得到固定宽度时，使用 max-width 而不是width，因为它可以适应较小的分辨率，而无需使用媒体查询。
- 不要忘记为替换元素（比如 img、object、video、iframe 等）设置一个 max-width，值为 100%。
- 假如背景图片需要完整地铺满一个容器，不管容器的尺寸如何变化，background-size: cover 这个属性都可以做到。
- 当图片（或其他元素）以行列式进行布局时，让视口的宽度来决定
列的数量。弹性盒布局（即 Flexbox）或者 display:inline-block加上常规的文本折行行为，都可以实现这一点。 - 在 使 用 多 列 文 本 时， 指 定 column-width（ 列 宽 ） 而 不 是 指 定column-count（列数），这样它就可以在较小的屏幕上自动显示为单列布局。
预处理器
Stylus（http://stylus-lang.com/）、Sass（http://sasslang.com/）或 LESS（http://lesscss.org/）这样的 CSS 预处理器可以为 CSS的编写提供便利，比如变量、mixin、函数、规则嵌套、颜色处理等。不过，预处理器也不是完美无
缺的：
- CSS 的文件体积和复杂度可能会失控。即使是简洁明了的源代码，在经过编译之后也可能会变成一头从天而降的巨兽。
- 调试难度会增加，因为你在开发工具中看到的 CSS 代码并不是你写的源代码。（SourceMap会告诉浏览器哪些编译生成的CSS 代码对应哪些预处理器 CSS 代码，精确到行号。）
- 预处理器在开发过程中引入了一定程度的延时。
- 带来更高的学习成本。
- 预处理器有它们自己的 bug。这些 bug 可能会潜伏很久，因为我们很少会怀疑预处理器的某个 bug 才是我们CSS 出错的幕后元凶。
其实现在很多受预处理器启发的特性都已经以各种方式融入到原生 CSS 中了：
- 有一份关于（跟变量类似的）自定义属性的草案，叫作 CSS 自定义属性暨层叠式变量（http://w3.org/TR/css-variables-1）。
- CSS 值与单位（第三版）中的 calc() 函数，不仅在处理运算时非常强大，而且已经得到了广泛的支持，当下可用。
- CSS 颜色（第四版）（http://dev.w3.org/csswg/css-color）引入的 color()函数会提供颜色运算方法。
- 关于嵌套，CSS 工作组内部正在进行一些正式的讨论，甚至以前还有过一份相关的草案（ED）。
这些原生特性通常比预处理器提供的版本要强大得多，因为它
们是动态的 1。举个例子，预处理器完全不知道如何完成 100% - 50px 这样的计算，因为在页面真正被渲染之前，百分比值是无法解析的。但是，原生CSS 的 calc() 在计算这样的表达式时没有任何压力。
上面提到的原生 CSS 特性绝大多数在目前还没有得到很好的支持。建议：在每个项目开始时使用纯 CSS，只有当代码开始变得无法保持 DRY 时，才切换到预处理器的方案。