一、浏览器前缀
最常见的前缀分别是 Firefox 的 -moz-、IE 的 -ms-、Opera
的 -o- 以及 Safari 和 Chrome 的 -webkit-。
二、CSS编码技巧
（1）尽量减少代码重复
（2）存在依赖，用代码表达出来他们的相互关系。
font-size：125%;
line-height:1.5;
注解：行号是字体的1.5倍。变成可缩放的，依赖字号进行缩放。
（3）其实只要把半透明的黑色或白色叠加在主色调上，即可产生主色调的亮色和暗色变体，这样就能简单地化解这个难题了：
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);
（4）技巧：
a.代码易维护VS代码量少；
b.特殊的颜色关键字：currentColor
示例：水平线与文本的颜色保持一致。
hr {
height: .5em;
background: currentColor;
}
c.inherit
inherit 可以用在任何 CSS 属性中，而且它总是绑定到父元素的计算值（对伪元素来说，则会取生成该伪元素的宿主元素）。
示例1：要把超链接的颜色设定为与页面中其他文本相同，还是要用inherit：
a { color: inherit; }
示例2：inherit 关键字对于背景色同样非常有用
在创建提示框的时候，你可能希望它的小箭头能够自动继承背景和边框的样式。
.callout { position: relative; }
.callout::before {
content: "";
position: absolute;
top: -.4em; left: 1em;
padding: .35em;
background: inherit;
border: inherit;
border-right: 0;
border-bottom:0；
transform：rorate(45deg);
}
（5）视觉差异
这些视觉上的错觉在任何形式的视觉设计中都普遍存在，需要我们有针对性地进行调整。
（6）
（7）合理的使用简写
进行简写的时候，解析器需要在没有属性名提示的情况下弄清楚 50% 50% 到底指什么。这就是需要引入斜杠的原因。
（8）预处理器：stylus,sass,less
缺点：
在引入预处理器的问题上需要冷静决策
