本文摘自PHP中文网，作者青灯夜游，侵删。
方法：1、压缩css，减少文件体积；2、使用link引入css文件；3、合理设计CSS布局，注意复用样式，减少渲染上花的时间；4、少用“*”选择器；5、慎用浮动、定位等高性能属性；6、尽量减少页面重排、重绘；7、属性值为0时，不加单位等等。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
CSS优化主要是4个方面：
加载性能
主要是从减少文件体积，减少阻塞加载，提高并发方面入手
选择器性能
渲染性能
可维护性、健壮性
下面给大家具体介绍一下。
加载性能：
1、css压缩：将写好的css进行打包压缩，可以减少很多的体积；
2、css单一样式：当需要下边距和左边距的时候，
很多时候选择：margin: top 0 bottom 0;
但 margin-bottom: bottom;margin-left: left;执行的效率更高；
3、减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载；
4、合理设计CSS 布局，注意复用样式，减少渲染上花的时间。class和ID的选择，少用*这种全局匹配，合理设置基本样式（如设置table{}）提高复用。
选择器性能：
CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；
**避免使用通配规则**
如*{} 计算次数惊人！只对需要用到的元素进行选择
**尽量少的去对标签进行选择，而是用class**
如：#nav li{},可以为li加上nav_item的类名，如下选择.nav_item{}
**不要去用标签限定ID或者类选择符**
如：ul#nav,应该简化为#nav
**尽量少的去使用后代选择器，降低选择器的权重值**
后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
