如果我总是使用 CSS 类而不是 CSS ID 来做所有事情，有什么优点和缺点吗？答案

【问题标题】：Is there any pros and cons if i use always CSS Class instead CSS ID for everything?如果我总是使用 CSS 类而不是 CSS ID 来做所有事情，有什么优点和缺点吗？
【发布时间】：2019-02-16 12:03:49
【问题描述】：

在 CSS 中，我们可以同时使用 ID 和类。如果我在语义、Web 标准-W3C、SEO、可访问性和未来可维护性方面总是使用 Class 而不是 ID，是否有任何利弊？

【问题讨论】：

CSS没有语义的概念，不影响SEO，CSS选择器没有可访问性的概念。

标签： css css-selectors

【解决方案1】：

一个很大的区别：在 CSS 中，类的重要性级别低于 ID。

想象一下，CSS 声明中的每个规范都为该声明的值添加了一定数量的点。假设这些点是这样的（完全编造，但无论如何）：

标签名称（'a'、'div'、'span'）：1 分
类名（'.highlight'、'.error'、'.animal'）：10 分
ID（'#main-headline'、'#nav'、'#content'）：100 分

因此，以下声明：

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

#nav .highlight a {
    color: #f00;
}

分别值 1、11 和 111 分。对于给定的标签，与它匹配的点数最多的声明“获胜”。例如，通过这些声明，所有 a 标记都将是蓝色的，除非它们位于具有“highlight”类的元素内，在这种情况下它们将是绿色的，除非该元素在内部id="nav" 的元素，在这种情况下它们会是红色的。

现在，如果您只使用类，您可能会陷入棘手的境地。假设您要将内容区域中的所有链接设为蓝色，但将 foo 区域中的所有链接设为红色：

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

根据我之前的（编造的）量表，这两个都有 11 分。如果您的内容中有一个 foo ，那么哪一个会赢？在这种情况下， foo 获胜，因为它在后面。现在，也许这就是你想要的，但这只是幸运。如果您稍后改变主意，并希望内容获胜，则必须更改它们的顺序，并且取决于 CSS 文件中声明的顺序是一个坏主意。现在，如果您有以下声明：

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

内容总是会赢，因为该声明的值为 101（超过 foo 的 11）。无论它们以什么顺序出现，内容声明总是会击败 foo 的。这为您提供了一些非常重要的一致性。中奖者不会根据文件中的更改顺序而任意更改，如果要更改中奖者，则必须更改声明（可能在 .foo 声明前添加一个#content，这样就会有 111点）。

所以基本上，值的差异很重要，如果你只使用类，你会得到很多不一致和看似武断的赢家。

【讨论】：

对于选择器得分来说，这是一个非常好的猜测。在这里查看 CSS3 选择器的特异性：w3.org/TR/2009/PR-css3-selectors-20091215/#specificity
这是一个很好的答案，但是依赖顺序肯定不是“坏主意”；顺序只是优先级的决定因素之一（在spec 中）。当您使用多个文件时，顺序尤其重要，例如，您想要覆盖的 3rd-party CSS。即使您没有使用多个文件，如果您从不依赖顺序，您的规则名称也可能会变得不必要地冗长。
这是我见过的最好的使用 id 样式的用例，但你仍然增加了定义的一般特异性，所以随着时间的推移，你将不得不添加额外的 id 或 !important 只是覆盖#content a...坚持上课，请...“下一个家伙”会感谢你:)
你们中有多少人正在将 id 更改为类并认为：它应该是唯一的......使用 ID 也有问题。
您可以只增加基于类的选择器的特异性没问题：.myClass.myClass 可以很好地做到这一点，并清楚地表明您只是想增加特异性。当您希望样式覆盖基于 id 的样式时会发生什么？你运气不好。在我看来，有比使用 ID 更好的解决方案，基本上每一个。

【解决方案2】：

我知道我不是这里的“标准”，我会因此而被淘汰...但我只使用类并且只使用 ID 进行脚本编写 :)

这为设计人员和编码人员相关的调整和更改创建了一条清晰的分隔线，这对我们来说非常方便！。

此外，我们还有一些 .NET Web 表单编码器（即使我们将所有站点都移至 MVC），并且由于 .NET 控件接管 ID 以使用 ID 为 CSS 动态编写脚本，这很痛苦……我不是喜欢在 css 文件中使用 #ct00_ct02_MyControlName 的粉丝，即使我更改代码也会破坏 CSS！类对此非常有用。

公司其他人正在使用的一些PHP库也需要使用动态ID分配，这也产生了问题。再次上课在这里工作得很好。

随着越来越多的这些动态输出和语言用完 ID（它们的真正目的是什么......识别一个与之一起使用的元素），使用 ID 可能会越来越痛苦在 CSS 中。

在我看来，每个人都想使用它们只是因为他们认为应该使用它们，因为它们“在那里”，我提出的想法是 ID 根本不存在于 CSS 中，它们在 CSS 中的使用只是作为一个通过选择器的额外助手，它们的真正用途是脚本。

没有一个实例需要我使用 css 的 ID，甚至没有一个实例更容易。

但也许我只是习惯了它，这就是为什么？我的 HTML 输出很小，我的 CSS 文件小而直接。正如我所料，嵌套元素在所有浏览器中都能正常工作，我没有问题，可以创建复杂且渲染良好的页面。更改只需几分钟，因为我可以将多个类应用于一个元素或创建一个新元素。

用于编写脚本的 ID，用于 css 的 CLASS... 是一种享受。

显然，将它们用于 css 并没有什么大问题（即使在设计师和编码人员的团队中），因为我们都习惯了我们习惯的东西 :) 但我们的工作方式可以快速输出预期的结果，即使在匿名共享环境中，也没有人可以踩到任何人的脚趾。

【讨论】：

由于类和 ID 的特殊性不同，这不是一个好的建议。
@White Gragon：完全同意你的观点，在这里看看我的想法：Use only classes, never use IDs
有大量的 CSS 选择器：w3schools.com/cssref/css_selectors.asp 您显然有偏好，但这并不是正确的答案。

【解决方案3】：

我最大的问题是从未来维护的角度来看。不仅很高兴知道一种样式仅用于页面上的一个元素，而且如果您开始将 javascript 集成到您的页面中，那么能够使用它们的 ID 快速访问元素而不是尝试通过它们的类的。

【讨论】：

此外，ID 总是有好处的。仅使用类可能会导致一些不可忽视的行为。至于我，我喜欢在不同的地方使用像“row”这样的类名，目的不同，只有当我将它们分配给特定的 ID 时才有可能，以避免呈现问题。我认为这不会与 SEO 混淆，W3C 也不会，它是一个标准。
没有什么能阻止 ID 被另一个组件重用。我已经看到这种情况发生了很多次，尤其是错误的。它们给你一种错误的确定感，以及后来的特异性头痛。

【解决方案4】：

如果您使用的是一个不错的 javascript 库（如原型或 jQuery），那么不，我想不出任何技术上的原因为什么这很重要。但是，单独考虑它是类似属性的集体特征（=> 类）还是特定项目（=> ID）可能有助于您自己的内部思考和一致性。

【讨论】：

尽管大多数 javascript 库在通过 id 而不是类获取元素方面要快得多

【解决方案5】：

当一个元素在页面上是唯一的并且您总是期望它是唯一的时，使用id。当将为多个元素分配属性值时，使用class。确实，从纯 CSS 的角度来看，它可能没有太大的区别，但从 JavaScript 或 Selenium 的角度来看，能够通过 id 属性唯一标识元素是一件大事。

【讨论】：

【解决方案6】：

简单来说，我们可以定义 id 和 class 如下

ID = A person's Identification (ID) is unique to one person. 
Class = There are many people in a class.

当每页仅出现一次时使用 ID。当每页出现一个或多个事件时使用类。对于何时使用 ID 和何时使用类没有硬性规定。我的建议是尽可能使用类以获得最大的灵活性，唯一的例外是当你想使用 Javascript 的 getElementByID 函数时，在这种情况下你需要使用 ID。

【讨论】：

【解决方案7】：

ID 适用于需要从 JavaScript 访问的元素。但是根据 w3 标准，页面中的 ID 必须是唯一的，即：

一个文档中不能有两个<div id="Header">
您不能在一个文档中同时包含 <div id="Header"> 和 <p id="Header">

类名适用于不需要从 JavaScript 访问的元素（尽管可以这样做）。一个类名可以用于多个元素，一个元素可以附加多个类名。因此，类名允许您创建更多“通用”css 定义，例如：

<div class="column">
<div class="column left-column">
<div class="column right-column"> -- 三个都可以在同一个文档中

您可以将 ID 和类混合在一起。

总结一下：在特定情况下使用 ID；通用案例的类名；和级联类，用于共享一些通用属性但不是全部的元素。

【讨论】：

【解决方案8】：

请参阅以下内容：
CSS Best Practice about ID and Class?

对于 SEO： 对 seo 完全没有影响。

您应该选择反映该部分语义内容的名称。例如：id="leftMenu" class="footerNotes"

不要在你的类和 id 名称中使用任何下划线（常见错误）。

【讨论】：

【解决方案9】：

class 和 id 之间的唯一区别，除了 id 必须是唯一的而 class 不是，是浏览器可以将元素的 id 用于导航目的。例如，此页面有一个 id="hlogo" 的徽标。如果您在此页面的 url 附加哈希 #hlogo，例如 https://stackoverflow.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class-instead-css-id-for-everythi#hlogo，浏览器将自动滚动到徽标。

【讨论】：