本文主要介绍前端性能优化之CSS优化。高效的CSS不仅可以减少页面样式解析需要的时间，还可以减小CSS文件体积、减少资源传输时间，提高代码可维护性。

CSS优化主要包括以下几点：

1 css3过渡动画开启硬件加速

.translate3d{
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

2 避免CSS表达式

CSS表达式的执行需跳出CSS树的渲染，因此请避免CSS表达式。

3 不滥用Float

Float在渲染时计算量比较大，尽量减少使用

4 值为0时不需要任何单位

为了浏览器的兼容性和性能，值为0时不要带单位

5 尽量减少使用shadow属性

shadow比较耗性能

6 减少选择器层级

CSS选择器层级越少，解析越快；选择器层级推荐最多使用两层；

7 使用高效选择器

尽量避免"*"的使用，避免使用属性选择器，推荐都使用类选择器；

8 减少冗余，压缩CSS文件

较少CSS代码冗余，提高代码复用率。