编写好的CSS代码能提升页面的渲染速度。本质上，一条规则都没有引擎解析的最快。MDN上将CSS选择符归拆分成四个主要类别，如下所示，性能依次降低。

1. ID 规则
2. Class 规则
3. 标签规则
4. 通用规则

对效率普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始的，虽然Souders的书中罗列的非常详细，你可以在这里查看完整列表引用。你也可以在谷歌的高效的CSS选择器的最佳实践中查看更多的细节。

本文我想分享一些我在编写高性能CSS中用到的简单的例子和指导方针。受MDN的编写高效的CSS指南的启发，并遵循类似的格式。

避免过度约束

作为一般规则，不添加不必要的约束。

// 糟糕
ul#someid {..}
.menu#otherid{..}

// 好的
#someid {..}
#otherid {..}

后代选择符最烂

不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。

// 烂透了
html div tr td {..}

避免链式（交集）选择符

这和过度约束的情况类似，更明智的做法是简单的创建一个新的CSS类选择符。

// 糟糕
.menu.left.icon {..}

// 好的
.menu-left-icon {..}

坚持KISS原则

想象我们有如下的DOM：

<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li