3

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

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

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

选项 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

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

4

2 回答 2

2

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

外观的特殊性和顺序决定了风格如何相互层叠。虽然存在性能影响，但我不会过分关注最常见的场景。

当您使用像这样的选择器时，.widget .widget-item它会比诸如.widget-item. 因此，如果.widget-item在某些情况下您可能想要覆盖某些默认样式，那么您可能会添加类似.widget .widget-item的东西来代替使用。类似地，你可能会做一些不太具体的事情，比如div.widget-item覆盖最初匹配的潜在规则.widget-item。

基本上，这就是你真正应该如何处理规则冲突的方式，而不是诉诸一个常见的错误，即把 a 放在一个!important地方，这会导致你无法再控制的冲突重要规则，因为它们要么具有相同的特异性，要么不足以满足规则你想匹配。

这是一篇关于该主题的文章。

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

于 2013-06-20T16:56:14.447 回答
2

查看这篇关于从 CSS 中分离 HTML 的帖子。我尽可能避免深度链接，因为它会让你的风格变得脆弱。从维护的角度来看，简单的.widget类选择器更容易修复和更改。

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

于 2013-06-20T17:03:13.773 回答