Question

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

<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

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

Answer 1

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

特异性和外观顺序驱动样式如何相互级联。虽然存在性能影响，但我不会过分担心大多数常见情况。

当您使用.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/

Answer 2

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

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

CSS选择器策略:(使用父类的前缀：.widget .widget-item {}）或（直接：.widget-item {}）

2 个答案: