Question

为什么jQuery UI会像这样编写CSS：

.ui-dialog .ui-dialog-titlebar-close {}
.ui-dialog .ui-dialog-content {}

由于他们的类名是如此描述性的，我认为它更快，如果他们这样做，也不太可能发生任何冲突：

.ui-dialog-titlebar-close {}
.ui-dialog-content {}

在我看来，他们正在不必要地嵌套类，并导致浏览器做更多的工作，但我想知道是否有一个我没有意识到的充分理由。有谁知道为什么他们像这样嵌套课程？

Answer 1

最有可能的原因是.ui-dialog-titlebar-close和.ui-dialog-content的CSS可重复使用。所以基本上他们确保这些类只有在.ui-dialog

的子元素时才会继承对话框的特定样式

Answer 2

他们这样做是具体的。

类.ui-dialog-content的元素还有其他几个类，例如.ui-widget-content。

<div id="dialog" class="ui-dialog-content ui-widget-content">

确保.ui-dialog-content的规则胜过其他类别.ui-dialog的规则。

检查元素时很明显。 <{1}}的背景和边界规则将被覆盖。

.ui-widget-content

Answer 3

你对shallow, preferrably one-level selectors are preferable的事实是正确的 - 至少从表现的角度来看，至少在理论上是如此。但是，在大多数情况下，渲染引擎优化会抵消其他微不足道的性能开销。

这是在易于维护，可读性和样式表大小开始的时候。降低特异性允许回收“部分”类 - 如果你look at the rendered markup，.ui-dialog将有一大堆其他类应用于它：

ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable

最好是在一个规则中应用所有属性吗？绝对不是从开发人员的角度来看，这种方法会让它成为维护的噩梦。想象一下，改变一个表现属性，然后将其回溯到所有“特定”规则，如你的例子！

为了提高这些选择器的特异性，使得选择器选择器（例如.ui-dialog .ui-dialog-content）合格的原因（如果不是立即显而易见的话）要微不足道。例如，.ui-helper-reset类基本上取消了以前设置的任何样式，因为规则是在css文件的底部声明的：

.ui-helper-reset {
    border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

要覆盖任何这些属性，必须使用更高特异性的选择器。

我个人不喜欢这种模式 - 我希望代码的一致性对这种类结构背后的推理贡献更多。

为什么jQuery UI使用嵌套的css类？

3 个答案: