优化 CSS：Narrow Definition (#mytable tbody span.myclass) 更好？答案

【问题标题】：Optimize CSS: Narrow Definition (#mytable tbody span.myclass) better?优化 CSS：Narrow Definition (#mytable tbody span.myclass) 更好？
【发布时间】：2010-11-14 23:03:19
【问题描述】：

我想知道是否有一个“狭隘”的定义，例如

#mytable tbody span.myclass
{
     color: #ffffff;
}

比解析更好/更快

.myclass
{
     color: #ffffff;
}

我在某处读到，据说狭义的定义实际上会对 CSS 速度产生某种不利影响，但我不记得在哪里，而且已经有一段时间了，所以我只想澄清它是否重要，以及是否重要，哪种解决方案更好/更快。

谢谢！

【问题讨论】：

标签： css micro-optimization css-specificity

【解决方案1】：

Google 的 Page Speed 有一些关于 using efficient CSS selectors 的信息。我建议从那里开始。

所以（非常）基本上，他们建议：

避免使用后代选择器，尤其是那些指定冗余祖先的选择器

所以你的第二个选项是最快的。

【讨论】：

【解决方案2】：

我会选择以前的 sn-p 并且不担心任何效率；除非你有十几个样式表 CSS 不会成为瓶颈。前一个 sn-p 更具可读性，并且您确切地知道您正在设计什么样式，以及它在结构上属于什么位置，因此当您跳回去进行编辑时，您知道要搜索什么。

再一次，如果你要让 global 样式像一个包含浮动的类一样，最好保持简单。

【讨论】：

+1：完全同意。最终用户不会注意到短格式的这种微小优化，但长格式可能更容易维护。

【解决方案3】：

“速度优化”真的不应该与 CSS 有任何关系。任何现代浏览器的差异都是微不足道的，但使用上的差异却不是。您应该根据您想要实现的目标、您希望样式级联的程度、您希望它们适用的位置以及是否需要覆盖更广泛的选择器来决定何时使用“窄”或“宽”选择器。

【讨论】：