编写高性能的css代码

本文来至MDN，参考伯乐在线翻译总结而来。有人说，css也有性能考虑么？这个当然，虽然css解析并不耗费服务器的运算资源，但在客户浏览器上解析呈现时也是会有不同性能的，尝尝看到某些网页打开的瞬间样式丑陋或不全，除了网络问题css未完全加载外，css代码的性能也是一个因素。这里的性能特指加速浏览器对css代码解析的过程。本文原始英文：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

性能优异的css代码，能提升浏览器渲染的速度；本质上一个页面中浏览器需要解析的css规则越少性能越好；以下是来至MDN的一些书写高性能css代码的总结性规则。

一、css选择器性能排行，依次排序降低

ID 规则，如#header{}
Class 规则，如.sidebar{}
标签规则，如div{}
通用规则，如*{}

二、一些书写高性能css代码的参考规则

避免过度约束

一条普遍规则，不要添加不必要的约束。

// 糟糕，不必要的ul约束
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

避免过多的后代选择符

过多的css后代选择符不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改。

// 非常糟糕
html div tr td {..}

避免链式多层选择符

这和过度约束的情况类似，可以考虑创建一个新的CSS类选择符代替。

// 糟糕 本来是为.icon书写样式，却附带了这么多链式层级
.menu.left.icon {..}
 
// 好的 为了便于识读 可以将原本的.icon改名为.menu-left-icon
.menu-left-icon {..}

坚持KISS原则

假设html结构如下

<ul id="navigator">
 <li><a href="#" class="twitter">Twitter</a></li>
 <li><a href="#" class="facebook">Facebook</a></li>
 <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

css样式书写如下

// 糟糕
#navigator li a {..}
 
// 好的
#twitter {..}
...

使用简约、紧凑的语法

尽可能的使用简约、紧凑语法。

// 糟糕 代码量多，书写繁琐，一定程度上增大了css文件体积
.someclass {
 padding-top: 20px;
 padding-bottom: 20px;
 padding-left: 10px;
 padding-right: 10px;
 background: #000;
 background-image: url(../imgs/carrot.png);
 background-position: bottom;
 background-repeat: repeat-x;
}
// 好的
.someclass {
 padding: 20px 10px 20px 10px;
 background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

避免不必要的重复

重复的css代码在浏览器渲染解析时也会加重负担。

// 糟糕
 
.someclass {
 color: red;
 background: blue;
 font-size: 15px;
}
.otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

// 好的
.someclass, .otherclass {
 color: red;
 background: blue;
 font-size: 15px;
}

遵循一个标准的css样式声明顺序

对页面的css书写，有定位、元素层级、浮动、边框、颜色、背景灯要素，书写时遵循一定的顺序标准。

.someclass {
 /* Positioning */
 /* Display & Box Model */
 /* Background and typography styles */
 /* Transitions */
 /* Other */
}

组织好的代码格式

这个应该算是便于识读，避免上述提到的几条规则出现，识读不畅时常会出现重构通用性样式的情况，某种程度上降低了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;
}