高效 CSS 指南

避免全局规则

确保规则不以全局分类结束

不要给 ID 分类规则指定标签名或者 class

如果有一条样式规则是以 ID 选择符为主选择符的，就别再画蛇添足的加上标签名了。ID 都是唯一的，因此加上标签名反而会无谓地拖慢匹配过程。(当有不同元素使用同一类名，而又需要动态地改变其中一个元素的类名来针对不同情况应用不同样式时是个例外。)

• BAD – button#backButton { }
• BAD – .menu-left#newMenuIcon { }
• GOOD – #backButton { }
• GOOD – #newMenuIcon { }

不要给 class 分类规则指定标签名

和以上规则类似，所有的类名也是唯一的。标签和类名连缀的写法是一个惯例(但是，如果设计的变更使得需要改变标签就会有灵活性的问题，因为也需要改变 class — 最好选用具有严格语义的名字，这种灵活性也是分离样式表的目标之一)。

• BAD – treecell.indented { }
• GOOD – .treecell-indented { }
• BEST – .hierarchy-deep { }

尽量把规则应用到最明确的类上。

拖慢系统最大的一个原因是有太多的 tag 分类规则了。通过给元素增加类名，可以把这些 tag 类里的规则分一部分去class 分类，就可以不需要浪费时间来试图给一个标签匹配那么多的的规则了。

• BAD – treeitem[mailfolder="true"] > treerow > treecell { }
• GOOD – .treecell-mailfolder { }

避免后代选择符

CSS 中，后代选择符(descendant)^[注1]的耗能高的可怕，尤其是选择符的规则是在 tag 或者全局分类中。子选择符(child selector)则经常是真正所需。如果没有主题模块所有者的明确允许，UI CSS 中禁止使用后代选择符。

• BAD – treehead treerow treecell { }
• BETTER, BUT STILL BAD (see next guideline) – treehead > treerow > treecell { }

Tag 类规则中最好不要包含后代选择符

避免使用具有 tag 类规则的后代选择符。这会明显地增加匹配时间（尤其是这些规则会被多次匹配时）。

• BAD – treehead > treerow > treecell { }
• BEST – .treecell-header { }

小心子选择符的使用

要小心使用子代选择符。如果有别的方式可以不用，就不要用子选择符。尤其是子选择符被大量使用在 RDF 树和类似的菜单中时。

• BAD – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

要注意模版中来自 RDF 的属性是可以复制的！可以利用这一点把 RDF 属性复制到需要改变那个属性的子元素上。

• GOOD – .tree-folderpane-icon[IsImapServer="true"] { }

倚赖继承

了解并使用那些可以继承的属性。XUL widgetry^[注2] 已经明确设置了，因此可以把 list-style-image 或者 font 规则应用到父级标签上，它将渗透进匿名内容。因此就不需要浪费时间为那些匿名内容写规则了。

• BAD – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
• GOOD – #bookmarkMenuItem { list-style-image: url(blah); }

上例中，样式化匿名内容的需求（没有理解 list-style-image 可以继承）导致了一条 class 类规则。其实这条规则应该属于最明确的一类 — ID 类规则。

要记住，尤其是那些匿名内容，它们都有同样的 class。上面那个不好的例子导致需要检查每个菜单的图标是否包含在 bookmarks 菜单项中。这是非常可怕的高昂消耗（有很多菜单）；除 bookmarks 菜单之外，这条规则不应该被其他任何菜单想检查。

使用 -moz-image-region

把一堆图片放到一个单独的图片文件中，并用 -moz-image-region^[注3] 选中会有显著的性能提升。()

注1: 后代选择符(descendant selector) 子选择符(child selector) 是有区别的。单从字面来讲，后代选择符，顾名思义包括儿子、孙子、重孙子等所有后代; 子选择符只是指儿子，就不管那帮孙子了。

注2: XUL widgetry 不清楚是啥。

注3: 貌似想法和现在说的 CSS sprites 方法差不多，要知道这可是十年前(2000年)的文章啊。 – 糖伴西红柿

本文链接：http://www.blueidea.com/tech/web/2010/7459.asp　

出处：
责任编辑：moby

上一页 在 Mozilla UI 中书写高效率 CSS [1] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。