编写高效的CSS

Question

好的,在另一个问题中正在讨论的内容,并提到了这个链接:

https://developer.mozilla.org/en/Writing_Efficient_CSS

在那篇文章中,他们说了一些我不知道的事情,但在我问起之前,我应该问一下......这是否适用于Firefox解释的CSS？原谅我的noobness,但我不确定他们的意思是Mozilla UI.(不要伤害我!)

如果确实适用,他们说:

避免后代选择器!

后代选择器是CSS中最昂贵的选择器.它非常昂贵,特别是如果使用选择器的规则在标签或通用类别中.经常需要的是子选择器.在未经皮肤模块所有者明确批准的情况下,UI CSS中禁止使用后代选择器.

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

后代选择器只是一个空间？然后孩子和后代之间会有什么区别？孩子是另一个内部的元素,但与后代不一样吗？在我写作的时候,我想我可能已经弄明白了.后代可能是孩子/孙子/曾孙/等？而孩子只有一个深？

对于我的问题的愚蠢程度再次抱歉...只是想知道,因为我一直在我的C​​SS中为我的网站使用后代.但是,是的,如果这不是关于Firefox,那么整个问题是没有意义的......

如果它不是关于Firefox,有没有人有链接到一篇解释Firefox或浏览器效率的文章？

Answer 1

后代可能是孩子/孙子/曾孙/等？而孩子只有一个深？

对,就是这样.由于子节点只能是一个深度,因此渲染引擎必须递归搜索以检查规则是否匹配的空间要小得多.

是的,那篇文章一般都是关于Firefox和浏览器的.其中的大多数(全部？)适用于任何页面渲染引擎.

Answer 2

首先 - 本文中的建议不适用于html页面 - 它们专门用于Mozilla UI - XUL,因此它可能是XUL的最佳实践,但不适用于html.

在平均HTML页面上应用CSS是加载页面时最快的事情之一.
此外,文章可能会建议应用css规则的最快方法,但代价是什么？例如,他们建议每个规则不要有多个类:

坏 - .treecell.indented {}
好 - .treecell-indented {}

这几乎是令人发指的.它可能会导致更快的CSS,但谁在乎呢？假设你已经拥有.treecell并且.indented遵循这些建议会导致复杂的逻辑,更难的维护,重复的CSS规则,更难的JavaScript(比CSS花费更多)等等.
他们建议不要使用CSS选择器的完整丰富性并用这些选择器替换扁平的课程,这是一种耻辱.