编写高效的CSS
最后更新于：2022-04-01 06:04:46
[TOC]
编写好的CSS代码，有助提升页面的渲染速度。本质上，引擎需要解析的CSS规则越少，性能越好。MDN上将CSS选择符归类成四个主要类别，如下所示，性能依次降低。
*ID 规则*
*Class 规则*
*标签规则*
*通用规则*
对效率的普遍认识是从Steve Souders在2009年出版的《[高性能网站建设进阶指南](http://click.union.360buy.com/JdClick/?unionId=16231&to=http://book.360buy.com/10067740.html)》开始，虽然该书中罗列的更加详细，但你也可以在[这里](http://csswizardry.com/2011/09/writing-efficient-css-selectors/)查看完整的引用列表，也可以在谷歌的《[高效CSS选择器的最佳实践](https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors)》中查看更多的细节。
本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到[MDN 编写的高效CSS指南](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS)的启发，并遵循类似的格式。
---
显然，这里只讲述了少数的规则，是我在我自己的CSS中，本着更高效和更易维护性而尝试遵循的规则。如果你想阅读更多的知识，我建议阅读MDN上的[编写高效的CSS](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS)和谷歌的[优化浏览器渲染指南](https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors)。
---
# 遵循一个标准的声明顺序
虽然有一些排列CSS属性顺序[常见的方式](http://css-tricks.com/new-poll-how-order-css-properties/)，下面是我遵循的一种流行方式。
```css
.someclass {
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
}
```
box-model从内向外写： `size -> padding -> border -> margin`
# 后代选择符最烂
不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。
~~~
// 烂透了
html div tr td {..}
~~~
# 避免链式（交集）选择符
这和过度约束的情况类似，更明智的做法是简单的创建一个新的CSS类选择符。
```css
// 糟糕
.menu.left.icon {..}
// 好的
.menu-left-icon {..}
```
# 组织好的代码格式
代码的易读性和易维护性成正比。下面是我遵循的格式化方法。
```css
/*糟糕*/
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
...
}
/* 好的 */
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
...
}
/* 好的做法 */
.someclass {
background-image:
linear-gradient(#000, #ccc),
linear-gradient(#ccc, #ddd);
box-shadow:
2px 2px 2px #000,
1px 4px 1px 1px #ddd inset;
}
```
# 参考
[编写更好的CSS代码](http://blog.jobbole.com/55067/)