Question

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

Answer 1

CSSLint为他们提出建议的原因提供了指导：

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

(link)

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

Answer 2

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

因为我知道结构是一致的，所以我不介意使用#page，#header，#nav，#wrapper，#content，{{ 1}}和#sidebar在我的css中用于扫描区域特定的样式。这些样式紧密耦合到这个特定的结构，这使得它们更少可重复使用;因为我重用了结构，所以可以重用。需要记住的重要一点是，在选择器中使用ID非常具体，应该谨慎使用。

关于specificity的几句话：

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

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

我不一般建议使用.foo a选择器来选择[id="XXXX"]属性，因为它很冗长并且可能会引起混淆。我执行建议使用[id]选择器进行基于custom [data-*] attributes的选择，以便将样式与DOM节点的当前状态更紧密地联系起来。

Answer 3

首先：

CSS Lint与JS lint一样，是一种伪装成验证而非权威的观点。

我已经在这五年了。我曾在非常大的零售网站，互动代理商，独立承包商工作，目前在SaaS公司工作。

ID非常糟糕的想法，IMO只是一个想法，如果你在处理团队时你的CSS-fu起初并不是很好。

良好，灵活的CSS，IMO，遵循以下一般最佳做法：

始终从常规移动。例如，一般正文的字体系列和最常见的字体大小应该只在一个地方声明。当您升级到通常涉及使用类的选择器时，您将开始覆盖font-size。当需要将一个基本上未使用的字体系列应用于非常特定的HTML子集时，在容器上使用ID来获取正文文本变体的元素是有意义的。
属性越普遍，覆盖越容易，您不应该担心意外覆盖最常见的属性。例如，body#some_id div，是一个非常糟糕的选择器，因此使用它。在第二层（有3 ... ish），您通常会处理与分类容器相关的常用重复元素的捆绑，因此偶然覆盖这些属性应该有点困难。＆＃39;意外＆＃39;当你在整个地方都有成堆的多级选择器时，IMO会更频繁地发生。在最后一层中，您应该处理的不是可重用元素，而是覆盖文档的高度特定部分。在这些情况下使用ID是一种理想的做法，而不是坏的做法，但最好谨慎使用ID，并且只能用于ID实际需要更改的项容器中元素的特定属性。
选择器越具体，就越难以意外地破解它。具体而言，我并不仅仅意味着元素上的ID。我的意思是ID＆＃d;容器元素靠近您实际定位的元素。然而，有意覆盖应该总是涉及最小的努力，这是ID实际帮助而不是阻碍你的地方（见下面的例子）。如果你发现自己处于＆＃34;用完ID，类和标签的位置＆＃34;我推荐暴力（至少是虚构的暴力）。但严重的是，有人应该被击中。
避免使用冗长的选择列表：您应该开始觉得自己做错了＃39;任何时候您经常使用4+选择器值进行声明。我不算数＆gt;作为标记/值的标记/值，因为明智地使用它是可维护性和性能的优秀实践。
避免特异性军备竞赛：你知道那个人。＆＃34;不要把我的东西弄得一团糟＆＃34;决定覆盖屁股的最好方法的新秀是使用他可以从身体开始的每个标签，选择器和ID。不要雇那个人或打他，直到他停下来。但是，即使对于更具前瞻性的球队，如果你没有（谨慎地）在有意义的地方为选择者增加更多的重量，那么军备竞赛仍然可以无辜地开始。

极简主义的方法尤为巨大。您越依赖HTML放置以避免首先需要CSS，就越好。你在全球范围内分发最一般的风格所做的更好的工作，你在更具体的环境中担心的越少。更精确定位和简洁的高度特定的属性覆盖越多，它们就越容易管理。这就是全面的非身份证政策是愚蠢的IMO。

什么更实用，更直接的覆盖？

此：

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

还是这个？

#sub-nav button

如果你通常独自工作或者只做一些小项目以保持网络开发的外观，同时在演讲中获得真正的金钱，那么上层工作可能看起来很愚蠢，而且当你工作时团队和你一直遵循一个仅限课程的政策，而你最近因为没有使用足够高的特异性而被烧毁，很容易开始为你的东西添加越来越多的类和标签（只是为了避免麻烦）一个很短的截止日期 - 你当然会在稍后的时间里将其更改回来），导致CSS文件中出现大量无法预测的混乱。

所以：尝试永远不要使用多个ID，并且只能用于不包含其他容器的容器的本地属性。尽量不要使用一个或两个以上的课程。避免使用从on-high开始定位元素的类和ID（它们代表的容器上面有许多祖先节点）。在大多数情况下，超过3-4个标签可能太多，直到需要对新手进行一些维护或训练/打屁股。遵循boyscout规则。当你安全的时候，那些重要的东西和明显过于具体的选择器。

但坚持使用经验法则而不是CSS＆＃34;法律＆＃34;并确保根据经验评估这些想法。不要相信任何人或任何传播一揽子陈述的工具，例如＆＃34;永远不要使用ID＆＃34;对于具有与CSS布局场景一样多的变量的东西。就我而言，这只是一个小伙伴，如果他们想声称自己是专家，那么负责的作者现在应该更清楚了解。

Answer 4

他们的论点在他们的回答中被提到，它将它与HTML紧密结合并且不允许重用。

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

这一切都归结为个人偏好。这不是你必须坚持的一些硬性规则，它似乎是CSS Lint团队的想法，而不是导致错误或任何事情的规则。

Answer 5

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

Answer 6

组件：如果您编写可重用组件，例如具有ID（例如<div id="data">）的表，然后如果将两个表放入一个文档中，则会得到INVALID html。

为什么不建议在CSS中使用ID进行选择？

6 个答案: