27

在CSS Lint中，他们不建议使用 aid来选择元素。我信任 CSS Lint，因为它是由对 CSS 非常了解和深入的聪明人编写的。但我想知道这是什么原因？为什么选择id不是一件好事？

4

6 回答 6

29

我不同意从不使用 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;
}

我与 CSSLint 的不同之处在于可重用的结构 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>

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

关于特异性的几句话：

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

如果您要定位所有<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"]选择器来根据自定义[data-*]属性进行选择，以便更紧密地将样式与 DOM 节点的当前状态相关联。

于 2011-11-10T18:50:58.263 回答
27

CSSLint 给出了他们为什么提出建议的指南：

ID 不应该在选择器中使用，因为这些规则与 HTML 耦合太紧密，没有重用的可能性。最好在选择器中使用类，然后将类应用于页面中的元素。此外，ID 会影响您的特异性，并可能导致特异性战争。

（来自Disallow IDs in selectors。）

基本上，如果您将代码构造为使用类而不是 ID，您的代码可以更通用且可重用，这通常是一件好事。此外，特异性是一件很难理解的事情，并且可能会导致难以发现的错误，因此如果您省略 ID 选择器，您就不太可能以意想不到的方式解决冲突的规则。

于 2011-11-10T18:38:04.513 回答
20

首先：

CSS Lint 和 JS lint 一样，都是伪装成验证的意见，而不是权威。

我已经在这工作了五年。我曾在大型零售网站、互动机构、作为独立承包商工作过，目前在一家 SaaS 公司工作。

ID 无疑是糟糕的想法，IMO 只是一个想法，如果你的 CSS-fu 在与团队打交道时一开始就不是那么好的话。

良好、灵活的 CSS，IMO，遵循以下一般最佳实践：

  • 总是从一般转向具体。例如，一般正文文本的字体系列和最常见的字体大小，应该只在一个地方声明。当您升级到更通常涉及使用类的选择器时，您将开始覆盖字体大小。当需要将大部分未使用的字体系列应用到非常特定的 HTML 子集时，此时使用容器上的 ID 来点击获取正文文本变体的元素是有意义的。

  • 一个属性应用得越普遍，它就越容易被覆盖，而且您永远不必担心会意外覆盖最通用的属性。比如这个，body#some_id div, 是一个非常糟糕的选择器，因此无法使用。在第 2 层（有 3...ish），您通常会更多地处理与分类容器相关的常用重复使用元素的捆绑包，意外覆盖这些属性应该会更难一些。IMO，当您到处都有成堆的多类选择器时，“偶然”发生得更频繁。在最后一层，您不应该处理可重用的元素，而是要覆盖文档中高度特定的部分。在这些情况下使用 ID 是一种理想的做法，也不错，但最好谨慎使用 ID，并且仅用于项目容器中 ID 实际需要更改的元素的特定属性。

  • 选择器越具体，就越难意外破坏它。具体来说，我不仅仅指元素上的 ID。我的意思是一个带有 ID 的容器元素，它靠近您实际定位的元素。然而，故意覆盖应该总是需要最少的努力，这就是 ID 真正帮助而不是阻碍你的地方（参见下面的示例）。如果您发现自己处于“用完 ID、类和标签”的境地，我建议使用暴力（至少是想象中的暴力）。但说真的，有人应该受到打击。

  • 避免冗长的选择器列表：当您经常使用 4 个以上的选择器值进行声明时，您应该开始觉得自己“做错了”。在计算时我不会将 > 算作标记/值，因为明智地使用它是可维护性和性能的绝佳实践。

  • 避免特异性军备竞赛：你认识这个人。那个“别弄乱我的东西”的菜鸟决定最好的方式来掩盖他的屁股是使用他可以从身体开始的每一个标签、选择器和 ID。在他停止之前不要雇用那个人或打他。但即使在更具前瞻性的团队中，如果你不（谨慎地）在有意义的地方增加选择器的权重，军备竞赛仍然可以很天真地开始。

特别是极简主义的方法是巨大的。您越是依赖 HTML 布局来避免首先需要 CSS，就越好。您在全球范围内分发最通用的样式方面做得越好，在更具体的环境中您不必担心的事情就越少。越是精确定位和简洁的高度特定的属性覆盖，它们就越容易长期管理。这就是全面的非 ID 政策是愚蠢的 IMO 的地方。

什么更实用和直接覆盖？

这个：

body .main-content .side-bar .sub-nav > ul > li > button

或这个？

#sub-nav button

如果您通常单独工作或只做一些小项目以保持以网络开发为生的形象，同时在演讲活动中赚取真金白银，那么上一个对您来说可能看起来很愚蠢且不太可能，但是当您与团队一起工作时，您'正在遵循一个仅限类的政策，而你最近因为没有使用足够高的特异性而被烧毁，开始向你的东西添加越来越多的类和标签会很容易（只是为了避免在很短的期限内遇到麻烦——你当然，稍后会改回来），从而导致您的 CSS 文件中出现不可预知的巨大混乱。

所以：尽量不要使用多个 ID，并且只用于不包含其他容器的容器的本地属性。尽量不要使用超过一两个类。避免以高位元素为目标的类和 ID（它们所代表的容器是上面的许多祖先节点）。在大多数情况下，超过 3-4 个标签可能太多了，直到需要对新手进行一些维护或培训/打屁股。并遵守童子军规则。在安全的情况下，随时删除那些重要的和明显过于具体的选择器。

但要坚持经验法则而不是 CSS“法则”，并确保根据经验评估这些想法。不要相信任何人或任何工具会针对具有与 CSS 布局场景一样多的变量的东西发出诸如“从不使用 ID”之类的笼统声明。就我而言，这只是菜鸟 kool-aid 并且负责的作者现在应该知道如果他们想声称自己是这方面的专家。

于 2012-08-24T03:09:40.867 回答
4

lonesomeday 在他们的回答中提到了他们的论点，即它与 HTML 紧密耦合并且不允许重用。

我可以提出一个论点，在某些情况下，您不希望样式被单个元素以外的任何东西使用，因此在 id 选择器上指定它是有意义的。

这一切都将归结为个人喜好。这不是您必须遵守的硬性规定，它似乎是 CSS Lint 团队的想法，而不是导致错误或任何事情的规则。

于 2011-11-10T18:42:44.867 回答
3

当您管理大量 CSS 或大型网站时，就会出现一个大问题。根据定义，ID 不可重复使用。但是您也会遇到特异性问题。当您开始更改特异性时，您会陷入与样式的讨厌的竞争条件。ID 比类更具体，但内联样式比 ID 更多。内联样式比外部样式表更具特异性。通过使用类，您可以将样式应用于元素的方式标准化，从而使事情更加可预测。这往往会简化开发，尤其是在与多人一起工作时。

于 2012-03-15T14:08:30.923 回答
0

组件：如果您编写可重用组件，例如带有 id 的表（例如<div id="data">），那么如果您将两个表放入一个文档中，那么您将获得无效的 html。

于 2019-04-12T14:42:06.073 回答