这里，按照我们常规的理解，箭头左边的写法似乎是应该更快的，因为它的限制更多。其实不然，id 是全局唯一的，在匹配 CSS 选择器时浏览器定位到 id 是最快的，如果伴随有其他的非 id 的 selector，反而会影响匹配的效率。
清单 9. 关于 class-categorized 规则
- button.indented {...}----->>.button-indented {...}
程序员们经常会给某个 Class 前面加上标签名称(Tag Name)，以更精确且快速的定位该节点，但是这样往往效率更差。和清单 8 中的原理一样，页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型(Tag)而导致的样式失效的情况，做到样式与元素的分离，两者独立维护。
清单 10. 尽量减少规则数量
- Span[mailfolder="true"] > table > tr > td.columnClass {...}
- ------------------->>>>>>>
- .span-mailfolder-tbl-tdCol {...}
规则越多，匹配越慢，上面一种规则需要进行 6 项匹配，先找“columnClass”，再找“td”，然后是“tr”，“table”，最后是符合“mailfolder”为“true”的 span，这种效率是非常慢的。如果用一个比较特殊的 class 替代(span-mailfolder-tbl-tdCol)，效率会快上好几倍。
清单 11. 尽量避免使用 descendant selector
- treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。
清单 12. 利用 CSS 的继承机制
- Color
- Font
- Letter-spacing
- Line-height
- List-style
- Text-align
- Text-indent
- Text-transform
- White-space
- Word-spacing
- #bookmark > .menu-left {list-style-image: url(blah)}
- ------------>>>>>>>>
- #bookmark {list-style-image: url(blah)}
在 CSS 中，有很多 CSS 的属性以可以继承的，如果某个节点的父节点已经设定了上述的 CSS 样式(如：color, font 等 ...)，并且子节点无需更改该样式，则无需再作相关设定，同时，也可以利用这一点：如果很多子节点都需要设定该 CSS 属性值，可以统一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额外设定，加速了 CSS 的分析效率。
结束语
这篇文章介绍了 Web 开发中关于 CSS 性能方面需要注意的一些小细节，从 CSS 本身着手，介绍了编写 CSS 代码中需要避免的一些写法，比如 CSS Expression 的弊端，CSS 缩写以及 CSS 选择器的注意事项等等，也分享了一些比较推荐的做法。我们可以在开发过程中尽量注意一下这些小细节，以尽可能多的提高我们 Web 应用的性能。
