3

为什么 jQuery UI 会这样写 CSS：

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

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

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

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

4

3 回答 3

2

Most likely because the CSS for .ui-dialog-titlebar-close and .ui-dialog-content is reusable. So basically they are ensuring these classes will only inherit specific styles to the dialog when they are children of .ui-dialog

于 2013-02-06T20:54:18.110 回答
1

他们这样做是为了具体。

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

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

为了确保规则.ui-dialog-content胜过他们添加的其他类的规则.ui-dialog。

当您检查元素时，这一点很明显。的背景和边框规则.ui-widget-content将被覆盖。

.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}

.ui-widget-content {
    background: url("images/ui-bg_highlight-hard_100_f2f5f7_1x100.png") repeat-x scroll 50% top #F2F5F7; /* Overridden */
    border: 1px solid #DDDDDD; /*Overridden*/
    color: #362B36;
}
于 2013-02-06T21:02:44.087 回答
1

您对浅层，最好是一级选择器更可取这一事实是正确的- 至少从性能角度来看，至少在理论上是这样。然而，在大多数情况下，渲染引擎优化抵消了原本微不足道的性能开销。

这是样式表易于维护、可读性和大小开始发挥作用的时候。降低的特异性允许回收“部分”类 - 如果您查看呈现的标记，.ui-dialog将会有一大堆其他类应用于它：

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

将所有属性应用到一个规则中会更好吗？绝对不是从开发人员的角度来看，这种方法会使其成为维护的噩梦。想象一下，更改单个表示属性，然后必须将其回溯到您的示例中的所有“特定”规则！

限定 ansector 选择器（例如.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;
}

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

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

于 2013-02-06T21:49:56.680 回答