CSS 选择器策略：（使用父类的前缀：.widget .widget-item {}）或（直接：.widget-item {}）[重复]答案

【问题标题】：CSS Selector Strategy: (Prefix using a parent class: .widget .widget-item {}) or (Directly: .widget-item {}) [duplicate]CSS 选择器策略：（使用父类的前缀：.widget .widget-item {}）或（直接：.widget-item {}）[重复]
【发布时间】：2013-06-17 15:25:36
【问题描述】：

这是一种非常常见的情况。假设我们有一些标记：

<div class="widget">
    <div class="widget-item"></div>
</div>

我们可以使用 2 个选项设置 .widget-item 的样式：

选项 1：使用父类的前缀

.widget .widget-item { /* styles */ }

选项 2：直接访问类

.widget-item { /* styles */ }

前缀是否有任何显着的性能优势/命中？

如果我不需要在另一个容器中重用该类，比如.other .widget-item，那么前缀有什么真正的好处吗？（大多数时候，我什至不需要在父级之外重用该类，所以在功能上没有区别？）

我发现自己在使用这些深度选择器，但我可能不应该这样做？

这家伙说你应该深深地窝：http://coryschires.com/why-you-should-deeply-nest-your-css-selectors/

这个人说你应该让它们保持简单，不嵌套：https://github.com/csswizardry/CSS-Guidelines#selectors

如果这是重复的，请原谅我，似乎找不到。

【问题讨论】：

CSS 从右到左。我认为第二种解决方案更快（因为它不必检查父母）
实际上，两者都不会快到足以产生丝毫差异
注意：这个问题不仅仅是关于性能...不要关闭我的问题！我得到的两个答案很棒，我还在阅读链接的文章。

标签： css css-selectors

【解决方案1】：

看看这个post on Decoupling HTML from CSS。我尽可能避免深度链接，因为它会让你的风格变得脆弱。从维护的角度来看，简单的 .widget 类选择器更容易修复和更改。

性能方面，我认为@Toni Michel Caubet 是对的。较短的选择器链对浏览器的工作量较小。

【讨论】：

【解决方案2】：

创建嵌套选择器还是简单选择器的决定确实应该基于您需要覆盖特定规则的可能性。

特异性和外观顺序决定了样式如何层叠。虽然会影响性能，但我不会过分关注最常见的场景。

当您使用像.widget .widget-item 这样的选择器时，它会比像.widget-item 这样的选择器具有更高的特异性。因此，如果您在某些地方使用.widget-item，您可能希望覆盖一些默认样式，那么您可以添加类似.widget .widget-item 之类的东西来代替使用。同样，您可能会做一些不太具体的事情，例如 div.widget-item，这将覆盖最初匹配 .widget-item 的潜在规则。

基本上，这就是您真正应该如何处理规则冲突的方式，而不必诉诸将!important 到处乱放的常见错误，这会导致您无法再控制的冲突重要规则，因为它们具有相同的特异性或不足以匹配您要匹配的规则。

这里有一篇关于这个主题的文章。

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

【讨论】：