css - 为什么在 CSS 中不推荐通过 ID 选择？

Question

<分区>

Answer 1

我不同意从不使用 ID 来选择元素的想法，但我确实理解其中的原因。

当通用形式就足够时，开发人员通常会使用非常高特异性的选择器:

#foo #bar #baz .something a {
    text-decoration: underline;
}

最好写成

.something a {
     text-decoration: underline;
}

此外，写作风格如下:

#foo-1,
#foo-2,
#foo-3,
#foo-4 {
    color: #F00;
}

最好写成:

.foo {
    color: #F00;
}

我与 CSLint 的不同之处在于重复使用的结构 ID。

我经常用这种结构标记页面:

<div id="page">
    <div id="page-inner">
        <header id="header">
            <div id="header-inner"></div>
        </header>
        <nav id="nav">
            <div id="nav-inner"></div>
        </nav>
        <div id="wrapper">
            <div id="wrapper-inner">
                <div id="content">
                    <div id="content-inner">
                        <article></article>
                        ...
                    </div>
                </div>
                <div id="sidebar">
                    <div id="sidebar-inner">
                        <div class="module"></div>
                        ...
                    </div>
                </div>
            </div>
        </div>
        <footer id="footer">
            <div id="footer-inner"></div>
        </footer>
    </div>
</div>

而且因为我知道结构是一致的，所以我不介意使用 #page , #header , #nav , #wrapper , #content , #sidebar , 和 #footer在我的 CSS 中，用于清除特定于区域的样式。这些样式与此特定结构紧密耦合，这使得它们不易重用；因为我重用了结构，所以它们 是可重用的。要记住的重要一点是，在选择器中使用 ID 是非常具体的，应该谨慎使用。

---

关于 specificity 的几句话:

一般来说，应该使用做出正确选择的尽可能低的特异性选择器:

如果您要定位所有 <a>元素，那么使用 a 是有意义的.
如果您要定位所有 <a> <div class="foo"> 中的元素, 那么使用 .foo a 是有意义的.
如果您要定位所有 <a> <div id="bar"> 中的元素, 那么使用 #bar a 是有意义的. 但是，您可以使用较低特异性的选择器。 [id="bar"] a与 .foo a 具有相同的特异性，这意味着您仍然可以通过 ID 定位特定元素，而无需创建具有不必要的高特异性的选择器。

我不通常建议使用[id="XXXX"]在 [id] 上进行选择的选择器属性，因为它很冗长，可能会引起混淆。我确实推荐使用[data-id="XXXX"]基于 custom [data-*] attributes 选择的选择器将样式与 DOM 节点的当前状态更紧密地联系起来。