将 id 属性用于 CSS 目的的原因是什么？ [关闭]答案

【问题标题】：What are the reasons to use the id attribute for CSS purposes? [closed]将 id 属性用于 CSS 目的的原因是什么？ [关闭]
【发布时间】：2018-09-21 00:07:21
【问题描述】：

我一直使用class 属性，从不使用id 用于CSS 选择和样式。我知道id 必须是唯一的，但这似乎不是将它用于 CSS 的理由。

我使用 id 属性的唯一原因是用于 JavaScript 和表单标签。

我发现将 id 和 class 混合用于 CSS 会导致混淆，对我来说这是强制分离样式和行为的好方法。

是否有充分的理由将 id 用于 CSS 目的？有什么可以用id 实现而用class 做不到的事情吗？

我发现有用/有趣的评论

你可以对类说同样的话。有很多 JavaScript 确实（并且必须）以特定类的元素为目标。从行为的角度来看，在这些实例中更改类同样有问题。 - 亚伦西布
ID 在级联中的特异性与类不同。 - 基尔罗伊
如果 ID 是没有重复的元素，尤其是在所有/大多数页面中都显示的内容时，使用 ID 进行样式设置是有意义的 - RichN

【问题讨论】：

找到了一篇与此相关的好帖子：csswizardry.com/2011/09/writing-efficient-css-selectors
这是那篇文章的引述：“需要注意的是，尽管 ID 在技术上更快、性能更高，但实际上并非如此。使用 Steve Souders 的 CSS Test Creator 我们可以看到ID 选择器和类选择器在回流速度方面几乎没有差异。”我不认为处理效率应该是您主要关心的问题，除非您处理大量数据（例如，您是 Google）。

标签： javascript html css

【解决方案1】：

如果它是一个没有重复的元素，尤其是当它出现在所有/大多数页面中时，使用 ID 进行样式设置是有意义的。

例如：

页眉和页脚
搜索框（你可以在上面看到的东西）
导航列表（类似于右边的东西）

【讨论】：

+1 - 正是我的观点，比我的表达得更好:-)
我要添加警告，“假设这个元素出现不止一次是没有意义的”，而不是“只是在任何示例中都不会出现不止一次到目前为止我已经想出了”。所以像页眉？是的。广告框，因为现在我只有一个购买了广告的客户？没有。
支持 OP 的论点：元素（如页眉/页脚、搜索框）也可以使用 CSS 类设置样式并在技术上实现相同的结果。这里真正的重点是可读性：使用 ID 进行样式设置可以让 css 的读者清楚，这个元素对于每个页面都是唯一的。在 CSS 中使用 ID 是编写更具表现力的代码的一种方式。
“文档中只有一个”不是使用 id 属性的原因。这只是使用它的要求。
这就像说你应该使用独轮车，因为它只有一个轮子。它没有说明它的实用性。

【解决方案2】：

选择具有唯一 ID 的任何内容都比选择类更快。差异可以忽略不计，但在具有大量 DOM 元素的应用程序或密集的 Javascript 应用程序中，它会产生影响。

例如，如果您使用 jQuery，请查看：jquery performance rules

【讨论】：

我在 JavaScript 中使用 id 没有问题，我只是不知道为什么人们将它们用于 CSS 样式。
好吧，即使使用 css，您也会遇到一些问题，例如 IE6 在同一元素上使用 2 个 css 类时会遇到问题。如果您有一个带有 class="test hidden" 的元素，并且您有一个 test.hidden 的 css 选择器，则 IE6 中会出现一个错误，它无法选择该元素。
我很久以前就不再担心 IE6 了 :-) 对于我运行的网站，我只是没有从 IE6 用户那里获得足够的流量。
+1，那个“JQuery 性能规则”链接非常有用。
赞成这个，然后意识到你在谈论javascript。在 CSS 中选择具有唯一 ID 的元素也更快！换句话说，浏览器可以更快地找到并渲染元素。

【解决方案3】：

不，但如果您的元素有 id，为什么不将其用于样式？

你可以对元素名称说同样的话——你可以用p 做任何你不能用class='paragraph' 做的事情。这并不意味着将class='paragraph' 添加到每个<p> 元素是一个好主意。

【讨论】：

有什么特别的原因导致投票失败？你不同意吗？如果有，为什么？
我没有投过票（无论如何也不能投反对票），但老实说，我真的不明白你的意思 :-) 我将 ID 用于 JavaScript，我可以使用CSS 使用相同的 ID，但我发现它混合了样式和行为，我更愿意将它们分开以避免将来出现问题（删除 ID 意味着样式也会消失）。
我的观点是——如果你的元素已经有一个 ID，并且你希望那个特定的元素有一个样式——为什么要添加一个类？已经有一种方法可以设置它的样式。
@Rew 你可以对类说同样的话。有很多 JavaScript 确实（并且必须）以特定类的元素为目标。从行为的角度来看，在这些实例中更改类同样有问题。
呃，我也被否决了。很多意见，其中大多数与OP的问题无关。 /耸肩

【解决方案4】：

ID identify，类classify。这一点在这里或多或少地已经提到过好几次了。

一个例子是：

<div class="author" id="stephen">[...]</div>

从 CSS 特异性的角度来看，定位 ID 将使 CSS 规则比具有类的规则更具体，甚至是多个类。

因此：

p#recent {}

比更具体

body>p.news.recent {}

当用户代理发现这两个时，第一个将占上风。

【讨论】：

【解决方案5】：

我使用 ID 标签的主要原因是与阅读我的代码的人交流。具体来说，ID 标签可以让他们轻松引用他们想要的任何特定元素，让他们完全放心，因为他们知道他们对它所做的任何更改只会影响那个元素。

编辑：还有一个您可能不知道的使用 ID 标签的技术原因。我根据vol7ron 的comment 再次更新了这篇文章，并出于历史目的进行了一些进一步的研究。这些信息对于那些刚接触 CSS 的人来说很有启发性。

以下大纲准确说明了级联样式表的“级联”性质是如何工作的。在这个大纲中，首先根据大纲的最高标准比较 2 个 CSS 样式，即“1. Winner = !important declaration”。如果一种风格在这方面比另一种风格具有更高的优先级，则它获胜。如果它们在这方面相同，请继续执行下一个标准，直到找到差异化因素。

获胜者 = ！重要声明。
- 例如。 #some-element {color: blue !important;} 击败 #some-element {color: red;}。
获胜者 = 内联 CSS。
- 例如：
  - <div id="some-element" style="color: yellow;}">some content</div>beats...
  - <style type="text/css">#some-element {color: red;}</style> 和...
  - <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>。
获胜者 = ID 选择器中最大的 # 个。
- 例如。 #some-element#id-2 {color: blue;} 击败 #some-element {color: red;}。
获胜者 = 类、伪类和其他属性选择器中最大的#。
- 例如。 .some-elements.class-2 {color: blue;} 击败 .some-elements {color: red;}。
获胜者 = 选择器中 元素名称 和 伪元素 中最大的 #。
- 例如。 #some-element:hover {color: blue;} 击败 #some-element {color: red;}。
获胜者 = 机器最近阅读。
- 例如：
  - <style type="text/css">#some-element {color: red;}</style> 节拍...
  - <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/> 因为 internal CSS 在 external CSS 之后被读取。

【讨论】：

这是旧的，但一直都是这样：元素、类、id、内联（从最低优先级到最高优先级）。但是，文章只涉及到什么是胜利的主题，也就是external-css（链接）、internal-css（<style>标签）、inline（从最低到最高优先级）。
非常好的点@vol7ron。现在听起来怎么样？我也去掉了对 1/10/100 系统的引用，因为它实际上是有缺陷的。
哦，另外，我已经将内部与外部的区别概括为“最近阅读”，因为这就是发生的原因
好东西，回顾规则总是好的，即使你知道它们 - thx sfarbota

【解决方案6】：

您不必使用 ID。没有任何设计可以使用您无法使用类创建的 ID 创建。

话虽如此，使用 ID 的优点是可以清楚地将选择器标记为仅应用于页面中的一个元素。我通常将它们用于页面模板（#Content、#Navigation 等）中的样式元素。

一般来说，我会尝试在允许我使标记更简洁的区域中使用它。 When a selector can be targeted at a tag, you should use the tag.当它可以针对某个 ID 时，请使用该 ID。否则，使用一个类。

但是，同样，您是否使用 ID 并不是非常重要。

【讨论】：

【解决方案7】：

我倾向于认为 HTML 中 id 和 class 的关系类似于面向对象编程：id 就像 class 的一个实例。

我使用类多于使用 id，并且经常使用多类选择器（例如.film.drama）。但如果我确实想识别特定元素，以便应用特定的样式或行为，那么我将分配一个id，并且通常也分配一个class。例如。

<ul>
    <li class="film drama">A</li>
    <li class="book drama">B</li>
    <li class="film documentary" id="film-9832">C</li>
</ul>

在分配 id 时，我认为“在页面上存在多个这些是否有意义”。如果答案是肯定的，那我可能会去上课。

因此，正如 @RichN 和 @AaronSieb 所提到的，我经常将 id 用于特定的页面元素，这些元素肯定只会在页面上出现一次：

<ul class="sidebar" id="site-meta">[...]</ul>

【讨论】：

+1 - 我喜欢你给出的例子。

【解决方案8】：

如果您有同一个类的多个元素并且需要为其中的一个或多个指定不同的样式，这对我来说似乎很有效。

【讨论】：

这就是为什么您可以将多个 CSS 类附加到一个对象。
为什么不使用多个类？ class='genericClass specificClass' 等
为什么不使用内联样式？为什么不使用字体标签？
所有常见的浏览器还没有完全支持多个类。此外，ID 在级联和类中具有不同的特异性。

【解决方案9】：

我唯一能想到的使用 ID 是如果你有一个特异性战争 - 两个元素具有相同的特异性。应用 ID 将使您的元素具有更高的特异性 - 确切地说是 +100。

因此，如果您定义了两种具有相同特异性的样式，您可能希望通过对另一种应用更高的特异性来“破坏”一种。话虽如此，您也可以通过将更具体的类应用到该选择器来实现同样的效果，这会将特异性提高 10 倍。

ID = 100 (#foo) class= 10 (.bar) 元素 = 1 (div)

【讨论】：

【解决方案10】：

IMO，使用基于 ID 的样式是个坏主意。

ID 是唯一的，应该在您的 DOM 中最多只出现 1 次。这将任何 ID 相关样式的使用限制为最多 1 次。

另一方面，CSS 类可以多次使用，也可以完全不使用。

坦率地说，我认为 ID 应该用于行为，而 class 应该用于样式。您可以互换使用它们的事实是导致 Web 开发的某些方面不一致的部分原因。

【讨论】：

是的 - 但在每个引用您的样式表的文档中都有一次。仍然值得为恕我直言添加样式。我总是在我知道只有其中一个的页面组件的 ID 上做样式。这就是 ID 的用途。
为什么你认为对行为和样式有不同的需求？选择方法不是独立于你用它们做什么吗？如果您曾经使用过 jQuery，您会发现类对行为非常有用。就像闪存所有图像或缩放所有段落一样。例如，有一种常见的技术可以将菜单选择作为 CSS 的一部分，方法是将 id 应用于 body 标签并将其交叉引用到菜单项上的类。
所以 JM 你基本上是在说我必须使用
因为使用
和那么样式 #foo{} 是个坏主意吗？你真的认为冗余标记是个好主意吗？
@JM - RichN 的回答 (stackoverflow.com/questions/1607839/…) 有很好的例子，您可能想这样做。
您认为我需要多少其他元素来提供与顶部导航栏完全相同的外观和定位？没有理由说“ID 应该用于行为”。这是毫无根据的意见。

【解决方案11】：

当我知道我将在该特定元素上使用 javascript 时，我会使用 id。 ID 比 javascript 中的类快得多。

【讨论】：

【解决方案12】：

我个人更喜欢将 ID 用于静态页面元素（页眉、页脚）。原因是页面重量。

id="h" 比 class="h" 轻。

在我看来，每个字节都很重要。

【讨论】：

【解决方案13】：

我在 CSS 中使用 id 的主要原因是为了布局。如果我只有一个页眉和页脚，那么：

#header
{
...
...
...
}

#footer
{
...
...
...
}

或者我的主要内容的一个包装器，或者一个右侧边栏。如果有人认为他们喜欢我的布局并想查看源代码，这很容易看到。

【讨论】：