“不要在选择器 (CSS) 中使用 ID”那么，用什么来代替 ID？答案

【问题标题】："Don't use IDs in selectors (CSS)" then, what to use instead of IDs?“不要在选择器 (CSS) 中使用 ID”那么，用什么来代替 ID？
【发布时间】：2018-07-25 13:28:59
【问题描述】：

CSS lint rules 之一是：“最好不要在选择器中使用 ID”。那么，我们应该使用什么来代替 ID 来指向唯一元素呢？例如，假设我有几十个元素都有一个名为my-class 的类，而我只希望其中一个元素具有特殊的 CSS 属性。我能做什么？

【问题讨论】：

他们没有说“不要使用”，但最好不要使用：github.com/CSSLint/csslint/wiki/Disallow-IDs-in-selectors
您可以像@manuel-otto 建议的那样组合课程。然而，从 CSS lint 规则中得到的一点是，您希望尽可能避免样式化 ID，因为它们不能被重复使用。有时，恕我直言，使用 ID 并确保只有一个元素的样式不同（而不是由于不唯一而可能是其他元素）会更简洁
忽略 CSSLint。这是自以为是的废话。

标签： css stylesheet csslint

【解决方案1】：

CSS-lint 应该是“固定的”或者更新为现代标准，因为它基于 10 多年前的代码库，其中支持 IE6 和 IE7 仍然更可取。

现在每个人都应该知道 ID 是最快的 css 选择器，其次是 Classes、Dom 标签、相邻兄弟等。而且 CSS 从右到左读取。所以最短的选择器是最快的。由于#ID 是最快的选择器，而#ID（应该）是唯一的，因此在 CSS 中不使用 #id 作为选择器是可笑的。

【讨论】：

有充分的理由不将 ID 用作 CSS 选择器。我发现this article 是对这些的一个很好的总结。如果你想要短选择器，你也可以使用唯一的类名。

【解决方案2】：

例如给他们另一个类：

<div class="myClass special"></div>

.myClass.special{
  color: red;
}

【讨论】：

这里有趣的一点是 CSS lint 还说我们不应该使用相邻的类 :)
@AmirHosseinAhmadi 也许 lint 也说“最好不要编码任何东西！！” ...再次阅读他们的文档，他们从未说过不要使用，但要避免

【解决方案3】：

您可以为元素添加一个额外的类并在您的 css 中指定它而不是 ids。 ID 选择器比属性选择器具有更高的特异性，但不建议在 css 中使用 id，也不能重复使用。 CSS 类可以做所有 ID 可以做的事情。

【讨论】：

以下模式被认为是可以的，不会引起警告： /* 类之间的空格 */ .foo .bar { 边框：1px 纯黑色； }
选择器.foo .bar 与.foo.bar 的含义不同。前者选择 .bar 元素的后代 .foo 元素，而后者选择具有两个类的元素。