携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 1 天，点击查看活动详情 >>
CSS优化主要是4个方面：
-
加载性能
- 将css文件放在页面最上面body前
- 多个css文件合并，减少http请求
- 压缩打包，主要是从减少文件体积，减少传输时间。
- 尽量少使用复合属性（简写属性），哪个属性有值就设置哪个属性。
- 例如 margin: 10px 0 0 20px; 使用margin-top: 10px;margin-left:20px;代替
- 常见的复合属性有：background、border、animation、font、margin、padding、img...
- 减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载；
- 合理设计CSS 布局，注意复用样式，减少渲染上花的时间。
- 使用 CSS Sprites 雪碧图（精灵图）
- 使用 CSS 动画
-
选择器性能
- 尽量少用后代选择器，降低选择器的权重值
- CSS选择器是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素；
- 后代选择器开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层
- 避免使用通配规则
- 例如 * {}
- 尽量少用标签选择器
- 不要用标签限定ID 或者类选择符
- ul#nav 应该写成 #nav
- 更多使用类选择器来关联每一个标签元素
- 尽量少用后代选择器，降低选择器的权重值
-
渲染性能
- 慎用浮动、定位
- 浮动，定位会引起重排重绘
- 重排按照css的书写顺序：
- 位置：positon、top、left、z-index、float、dispay
- 大小：width、height、margin、padding
- 文字系列： font、line-height、color、letter-spacing
- 背景边框：background、 border
- 其它：anmation、transition
- 重绘：border、outline、background、box-shadow...
- 慎用浮动、定位
-
可维护性、健壮性
- 属性值为0时，不加单位
- 例如border-width: 0;渲染的是没有边框，border-width: 0px;渲染的是有0px的边框，虽然效果上一样，性能上有差别；
- 充分利用css继承属性，减少代码量；
- 将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用,提高css的可维护性；
- oocss也是提高css性能的途径之一，通过定义可复用的、语义化良好的基础类，然后添加到html中，这也是很多ui框架都在使用的一种方法，
- 例如：class="btn btn-active btn-blue"；
- 容器与样式分离；
- 因为样式的解析自上而下，并且后面重复的样式会覆盖前面的，因此避免使用后代选择器，多使用唯一类来进行样式的叠加
- 属性值为0时，不加单位
