CSS 优化细则

  • 慎重使用高性属性：浮动、定位；

  • 去除空规则；

  • 属性值为0时，不加单位；

  • 属性值为浮点数0.**时，可以省略小数点前的0；

  • 标准化各种浏览器前缀，带浏览器前缀的在前，标准的在后；

  • 不使用@import前缀，它会影响css加载速度；

  • 充分利用css继承属性，减少代码量；

  • 抽象提取公用样式，减少代码量；

  • 选择器优化嵌套，尽量避免层级过深；

  • 将css文件放在页面的最上面；

  • 避免使用复杂的选择器，层级越少越好　　

有时候项目的模块越来越多，功能越来越复杂，我们写的CSS选择器会内套多层，越来越复杂。

建议选择器的嵌套最好不要超过三层，比如：

.header .logo .text{}

可以优化成

.haeder .logo-text{}

简洁的选择器不仅可以减少css文件大小，提高页面的加载性能，浏览器解析时也会更加高效，也会提高开发人员的开发效率，降低了维护成本。

5、利用CSS继承减少代码量 我们知道有一部分CSS代码是可以继承的，如果父元素已经设置了该样式，子元素就不需要去设置该样式，这个也是提高性能的行之有效的方法。

常见的可以继承的属性比如： color，font-size，font-family等等

不可继承的比如： position，display，float等

关于CSS方法论

PreviouscssNextsass

Last updated