高效 CSS 指南

避免通用类

确保选择器不是以通用类结束。

不要用标签名或class来描述ID类

如果你有一个选择器是以ID类作为关键选择符,请不要添加多余标签名上去。因为ID是唯一的,你不要为了一个不存在的理由而降低了匹配的效率。

差 – button#backButton { }
差 – .menu-left#newMenuIcon { }
好 – #backButton { }
好 – #newMenuIcon { }

不要用标签名来描述 class 类

和上一条类似,所有的 class 也是唯一的。你应该把标签名包含在 class 名中。

差 – treecell.indented { }
好 – .treecell-indented { }

尽量选择最特殊的类来存放选择器

降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素,我们可以将类别进行再细分为 class 类,这样就不用为了一个标签浪费时间去匹配过多的选择符了。

差 – treeitem[mailfolder="true"] > treerow > treecell { }
好 – .treecell-mailfolder { }

避免子孙选择符

子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源,尤其是在选择器使用标签类或通用类的时候。很多情况中,我们真正想要的是子选择符。除非有明确说明,在 UI CSS 中是严禁使用子孙选择符的。

差 – treehead treerow treecell { }
好一点,但还是不行(参照下一条) – treehead > treerow > treecell { }

标签类中不要包含子选择符

不要在标签类中使用子选择符。否则,每次元素的出现,都会额外地增加匹配时间。(特别是当选择器似乎多半会被匹配的情况下)

差 – treehead > treerow > treecell { }
最好 – .treecell-header { }

留意所有子选择符的使用

小心地使用子选择符。如果你能想出一个的不使用他的方法,那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符,像这样。

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

请记住 RDF 的属性是可以在模板中被复制的!利用这一点,我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

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

运用继承

理解哪个属性会继承,并允许他们这么做!我们已经清楚地建立了 XUL widgetry(?) ,所以你可以把 list-style-image 或 font 属性设置在父标签上,然后他会渗透到匿名内容里。这样,你就不需要浪费时间在匿名内容上直接写声明了。

差 – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
好 – #bookmarkMenuItem { list-style-image: url(blah); }

在上面的例子中,定义匿名内容样式的需求(不用去搞明白 list-style-image 是如何继承的)导致需要一个 class 类的选择器,而这条规则实际上更应该以最唯一的 ID 类结尾。
请记住,特别是在匿名内容中,他们都拥有相同的 class 。上面那条不好的选择器写法导致每个菜单的图标都会被检查是否包含在收藏夹菜单栏目中。这是非常耗资源的(因为有很多菜单);这个选择器应该不要被收藏夹以外的菜单检查。

使用 -moz-image-region

把很多图片组合在一张图片里,然后用 -moz-image-region 来选择他们,会比每张图片分开存储,执行效率上高很多。

原文转自css88:http://www.css88.com/archives/402

7 thoughts on “高效 CSS 指南

    1. jucelin 文章作者

      看个标准啥的,以后自己学起来至少可以少走点弯路

      回复
    1. jucelin 文章作者

      我也是初学者,看这人家写出来的模版真是羡慕嫉妒恨呐

      回复

发表评论

邮箱地址不会被公开。 必填项已用*标注