Question

我正在使用具有如下模式的样式表：

.the-widget { foo: bar; }
.the-widget .some-thing { foo: bar; }
.the-widget .some-thing .some-other-thing { foo: bar; }

这样可以更容易地跟踪样式，但它似乎不能很好地扩展。我更愿意这样做：

.the-widget .some-other-thing { foo: bar }

并切断了中间人。我知道在如何构建样式表方面有很多不同的意见，因此我想询问使用详细选择器是否有任何客观优势。

Answer 1

您发布的三个示例之间的性能差异可以忽略不计。（一个批判性的谷歌搜索可能会证实我的陈述......）

最后一个例子非常好。作为一般规则，在CSS中具有尽可能少的特异性是很好的，否则您很快将使用!important语句乱丢您的代码或花费数小时在代码中的某处查找某些重写规则

Answer 2

这取决于您是否要在整个应用程序中共享“子样式”。如果你没有预见到需要你的特定情况你想要削减中间人是明智的，并且强烈定义选择器将导致较少的潜在命名错误。这真的是一个偏好问题。有些人坚持认为不是最好的方法。再次检查您的应用程序，并采取最符合您需求的路线。