CSS ID 与 Class在 CSS 中不使用 ID 的原因

有时，我在审查代码时，会建议同事不要在 CSS 样式选择器中使用 ID，结果总是被问到为什么。就像排队、泡茶或早上 6 点在黑暗中化浓妆一样，我毫不犹豫地会在 CSS 中避免使用 ID。我已经这样做很久了，从未质疑过这一点，以至于我花了好一会儿才向别人解释清楚为什么。因此，以下列出了我避免在样式表中使用 ID 而更喜欢使用类的原因。

1. 类别特异性低于ID特异性

ID 的优先级比类高得多。类本身无法覆盖属于 ID 的样式。为了“击败”ID，您需要更多 ID 或使用!important，这可能会引发样式表的优先级冲突。您甚至可能需要重构 HTML 代码。理想情况下，样式应该易于覆盖和扩展，以使您的 CSS 易于维护且易于使用。

2. 类可以重用

ID 在页面上应该是唯一的。这意味着，如果您将样式附加到 ID，您将无法在同一网页内重复使用它。然而，类可以出现在同一个页面上的多个 HTML 元素上。能够重复使用样式是 CSS 的优势之一。例如，<li>仅使用 ID 直接设置列表元素的样式会很困难。诚然，并非所有样式都需要重复使用，但有这个选择总是好的。

3. 一致的惯例

对于在代码库中工作的开发人员来说，更容易了解 CSS 是附加到类的，而 ID 则用于其他用途。仅使用属性来定义样式比使用属性和属性class的组合更容易让其他人理解。classid

4. 一个元素可以有多个类，但只能有一个 ID

您可以向 HTML 元素添加多个类，例如<div class="text-bold banner-text js-banner-text"></div>。这里有用于样式的类，以及用于 JavaScript 钩子的类，它们都分组在 class 属性中。您也可以使用这些约定来命名 ID，但请记住，每个元素不能有多个 ID。这意味着您不能像上面的类示例那样重载 ID 名称，例如<div id="text-bold banner-text js-banner-text"></div>。

使用多个类的组合来设置元素的样式是一种常见的模式。此外，对于仅供 JavaScript 或自动化测试使用的选择器，最好使用命名约定。例如，如果我看到一个以 为前缀的类js-，我知道它在 JavaScript 中的某个地方使用，并且不负责样式，因此在编辑它之前应该谨慎操作。（通常，qa-前缀 也用作测试的钩子。）我个人喜欢将所有钩子和样式类放在一个属性中，而不是在类和 ID 之间共享它们。

免责声明

当然，这条建议附带了通常的免责声明。你比任何一篇博客文章都更了解你的代码和问题的背景，如果你认为使用 ID 编写 CSS 有意义，那就继续使用 ID 吧。在 CSS 样式表中使用 ID 是完全有效的。

笔记

这并不是说你不应该在 HTML 中使用 ID。除了作为 CSS 选择器之外，ID 在网页中还有很多用途。例如，作为页面锚点、片段标识符或将标签链接到表单字段。

聚苯乙烯

在研究这篇文章时，我发现这个 StackOverflow 答案建议使用ID 来定义样式 - 这很好地提醒了我们，前端 Web 开发的流行观点可能会改变！