> For the complete documentation index, see [llms.txt](https://fontendnote.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fontendnote.gitbook.io/project/source/_posts/css/css-you-hua-xi-ze.md).

# 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方法论**