编写高效的CSS

最新推荐文章于 2025-08-13 18:53:35 发布

Daisukes

最新推荐文章于 2025-08-13 18:53:35 发布

阅读量758

点赞数

分类专栏： CSS 文章标签： css 标准

CSS 专栏收录该内容

15 篇文章

订阅专栏

注：原文为2000年该文件多，当谈到编写CSS是快速改变。本指南是不是在浏览器的渲染管线瓶颈的精确表示。特别是对于选择器，读取 CSS选择器性能变了！（为了更好的），一个更近服食。为了提高CSS的速度，调查回流（布局）和油漆的提高成本。

本文档提供了有关如何编写高效的选择优化CSS代码，更具体的指导方针。

CSS规范没有规定浏览器都必须如何实现风格的系统，只是它必须做什么。正因为如此，不同风格的系统的发动机可以有完全不同的表现行为，尤其是壁虎和WebKit这是开源的，实现类似的算法，具有非常相似的长处和短处。因此，此处提供的提示应该是现实世界的Web文档非常有用。

第一部分是一贯的作风系统如何分类规则的一般性讨论。以下各节包含该采取这样的风格系统实现的优势编写规则的指导方针。

样式系统如何打破了规则编辑

样式系统打破规则分成四个主要类别：

ID规则
班规
标签规则
通用规则

关键是要理解这些类，因为它们是规则匹配的基本构件。

我用这个词的键选择在下面的段落。关键是选择选择（即匹配元素被匹配，而不是它的祖先的部分）的最后一部分。

例如，在规则

a img, div > p, h1 + title {…}

关键选择器img，p和title。

ID规则

第一类包括那些有规则ID选择器作为关键选择。

例

button#backButton {…} /* This is an ID-categorized rule */
#urlBar[type="autocomplete"] {…} /* This is an ID-categorized rule */
treeitem > treerow > treecell#myCell:active {…} /* This is an ID-categorized rule */

班规

如果规则有一个class指定为它的关键选择，那么就属于这一类。

例

button.toolbarButton {…} /* A class-based rule */
.fancyText {…}	/* A class-based rule */
menuitem > .menu-left[checked="true"] {…} /* A class-based rule */

标签规则

如果没有class或ID指定为密钥选择器，下一候选是标签类。如果规则指定为它的关键选择一个标签，那么该规则属于这一类。

例

td {…} /* A tag-based rule */
treeitem > treerow {…} /* A tag-based rule */
input[type="checkbox"] {…} /* A tag-based rule */

通用规则

所有其他规则都属于这一类。

例

[hidden="true"] {…} /* A universal rule */  
* {…}		/* A universal rule */
tree > [collapsed="true"] {…} /* A universal rule */

如何风格系统匹配规则编辑

风格系统匹配先从键选择，然后向左移动，寻找规则的选择任何祖先规则。只要选择的子树继续检查，样式系统继续向左移动，直到它要么匹配的规则，或放弃它，因为不匹配。

最根本的概念学习的是这个规则的过滤。这些类别存在于以过滤掉无关的规则（这样样式系统不会浪费时间去匹配它们）。

这是关键大幅提高性能。检查给定元素所需的规则更少，速度更快风格分辨率会。

例如，如果一个元件具有一个ID，那么匹配的元素的ID唯一的ID的规则将被检查。只有班规为元素上找到一个类将被检查。匹配的标签，只有标签的规则将被检查。通用的规则将经常进行检查。

高效CSS指南编辑

避免通用规则

确保规则不会在通用类结束了！

不符合规则的ID标记名称或类别

如果规则有一个ID选择器作为其主要选择，不要标签名称添加到规则。因为ID都是唯一的，增加一个标签名会不必要地减缓匹配过程。

坏

button#backButton {…}

坏

.menu-left#newMenuIcon {…}

好

#backButton {…}

好

#newMenuIcon {…}

例外：当它希望改变 class的元件的动态，以便在不同的情况下应用不同的样式，但相同的 class 是要与其他元件共享。

不符合标记名称班规

以前的概念在这里也适用。尽管类可以在同一个页面上使用很多次，他们还是比标签更独特。

您可以使用一个惯例是，包括标记名称中的类名。然而，这可能会花费一定的灵活性; 如果设计变更对标记，该类名称必须同时改变。（这是最好的选择严格语义的名称，这种灵活性是独立的样式表的目标之一。）

坏

treecell.indented {…}

好

.treecell-indented {…}

最好

.hierarchy-deep {…}

使用最具体的类别

增速放缓的一个最大的原因是标签类别太多的规则。通过添加类元素我们，我们可以进一步细分这些规则成Class分类，免去了花费的时间试图匹配规则为给定的标签。

坏

treeitem[mailfolder="true"] > treerow > treecell {…}

好

.treecell-mailfolder {…}

避免后代选择

后代选择在CSS中最昂贵的选择，这是可怕昂贵的，特别是如果选择在标签或通用类别。

通常情况下，什么是真正需要的是子选择器。举例来说，表演是如此糟糕，那后代选择在火狐的用户界面CSS禁止，没有一个具体的理由。这是一个好主意，做同样的在网页上

坏

treehead treerow treecell {…}

更好，但仍然很糟糕（见下指南）

treehead > treerow > treecell {…}

标签类别的规则应永远不会包含一个子选择器

避免使用带有标签类别的规则子选择器。这将极大地延长比赛时间（特别是如果该规则可能被匹配），用于该元素的所有事件。

坏

treehead > treerow > treecell {…}

好

.treecell-header {…}

这个孩子选择器的所有用途

使用子选择器时务必谨慎。如果你能避免它。

特别是，子选择器常常用于RDF树和菜单，如下所示：

坏

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

请记住，REF属性可以在模板中被复制！利用这一点。重复儿童XUL元素的RDF属性以便根据属性进行更改。

好

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

靠继承

了解哪些属性继承，并允许他们这样做！

例如，XUL组件明确设置，使得父母 list-style-image 或font规则将渗透到匿名内容。这是没有必要就这一直接对话匿名内容规则浪费时间。

坏

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

好

#bookmarkMenuItem { list-style-image: url(blah) }

在上面的例子中，以风格匿名内容的愿望（没有利用的继承 list-style-image）导致，这是在类分类，当规则应在ID类别-最具体所有的类已经结束了一个规则！

记住：元素都具有相同的类，特别是匿名的内容！

上面的“坏”的规则，每队菜单的图标为书签菜单项中遏制进行测试。由于有许多菜单，这是非常昂贵的。相反，“好”的规则限制了测试，以书签菜单。

使用`-moz-image-region`！

如果你正在制定具体的Mozilla代码：把一堆图像到一个单一的图像文件，并选择他们-moz-image-region执行不是将每个图像到自己的文件显著更好。

使用范围样式表

如果指定样式表作为一个XBL资源，样式只适用于约束元素及其匿名内容。因为有要考虑的元素少这减少的普遍规则和子选择器的低效率。

避免供应商特定的功能，除非必要

总是有它的前缀术语几个特定浏览器或实验性标签和CSS属性确定它的工作原理上的浏览器（如-webkit，-moz，-ms，-o，等等）。一旦一个标签或属性规范，前缀被删除。例如，直到border-radius被标准化，所有主要的浏览器中实现，您必须使用-webkit-border-radius，-moz-border-radius等等。

注意一些在特定供应商的前缀任何更改，标签和属性的标准化，并尝试尽可能避免使用任何厂商特定的功能。