为CSS目的使用id属性的原因是什么？

Question

我一直使用class属性，从来没有id为CSS选择和样式的目的。我知道id必须是唯一的，但这似乎不是将其用于CSS的原因。

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

我发现混合id和class为CSS的目的可能会造成混淆，对我而言，这是强制分离样式和行为的好方法。

是否有很好的理由使用id用于CSS目的？ id有什么可以通过class无法完成的吗？

评论，我发现有用/有趣

• 你可以说一下班同样的事情。在那里有许多JavaScript（并且必须）针对特定类的元素。从行为的角度来看，在这些实例中更改类同样存在问题。 - AaronSieb
• ID在级联中的类别具有不同的特性。 - Killroy
• 使用的造型ID有道理的，如果它是没有重复的，尤其是如果它的东西，全部/大部分的网页显示出来的元素 - RichN

Answer 1

我使用ID标签的主要原因是与正在阅读我的代码的人交流。具体来说，ID标签可以很容易地引用他们想要的任何特定元素，并且完全放心，知道它对它做出的任何更改只会影响该元素。

编辑：还有一个更技术性的理由使用你可能不知道的ID标签。我根据vol7ron的comment和一些进一步的研究历史记录再次更新了这篇文章。对于那些刚接触CSS的人来说，这些信息可能相当有启发性。

下面的大纲说明了层叠样式表的“级联”的本质究竟是如何工作的：

1. 赢家= 重要声明！
   • 例如， #some-element {color: blue !important;}节拍#some-element {color: red;}。
2. 获胜者= 联机CSS。
   • 例如：
     • <div id="some-element" style="#some-element {color: yellow;}">some content</div>次...
     • <style type="text/css">#some-element {color: red;}</style>和...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>。
3. 得奖=最大ID选择器的＃。
   • 例如， #some-element#id-2 {color: blue;}节拍#some-element {color: red;}。
4. 得奖=最大类，伪类，和其它属性选择的＃。
   • 例如， .some-elements.class-2 {color: blue;}节拍.some-elements {color: red;}。
5. 得奖=最大＃的元素名称和伪元素在选择器。
   • 例如， #some-element:hover {color: blue;}节拍#some-element {color: red;}。
6. 获胜者= 最近读了的机器。
   • 例如：
     • <style type="text/css">#some-element {color: red;}</style>次...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>因为内部CSS之后外部CSS读取。

在这个纲要，通过基于轮廓，即最上面的标准比较2种的CSS样式启动 “1赢家= ！important声明。”如果一方在这方面的优先级高于其他方，那么它会胜出。如果他们在这方面是相同的，继续下一个标准，直到找到区分因素。

Answer 2

如果你有相同的多个元素类，并且需要为其中一个或多个样式指定不同的样式，这对我来说看起来相当有效。

Answer 3

不，但如果你的元素有id为什么不用它来造型？

你可以说元素名称相同 - 你可以用p做什么，你不能用class='paragraph'做什么。这并不意味着将class='paragraph'添加到每个<p>元素是一个好主意。

Answer 4

IMO，使用基于ID的风格是一个坏主意。

ID是唯一的，应该只发生在你的DOM中最多一次。这将任何ID相关风格的使用限制为最多1次。

另一方面，CSS类可以多次使用或根本不使用。

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

Answer 5

使用唯一ID选择任何内容比使用类选择要快。差异可以忽略不计，但在具有大量DOM元素的应用程序或JavaScript应用程序密集型应用程序中，它有所不同。

例如，如果你正在使用jQuery检查了这一点：jquery performance rules

Answer 6

使用的造型ID有道理的，如果它是没有重复的，尤其是如果它的东西，全部/大部分的网页显示出来的元素。

如：

• 页眉&页脚
• 搜索框中
• 导航列表（类似的东西右侧）

Answer 7

（你可以看到那里的东西）您不必使用ID。没有可以使用无法使用类创建的ID创建的设计。这就是说，使用ID具有清楚地将选择器标记为适用于页面中的一个元素的优点。我通常将它们用于我的页面模板中的样式元素（#Content，#Navigation等）。

通常，我会尝试在允许我使标记更加简洁的区域中使用它。当选择器可以作为标签的目标时，你应该使用标签。当它可以针对一个ID时，使用该ID。否则，请使用课程。

但是，再一次地，您是否使用ID并不是非常重要。

Answer 8

我使用一个id，当我知道即时通讯将在该特定元素上使用JavaScript。 ID的速度快于JavaScript中的类。

Answer 9

我倾向于将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> 

Answer 10

标识识别，分类分类。这一点在此已多次提及，或多或少。

一个例子是：

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

从CSS特异性的角度来看，目标的ID将CSS规则，而不是带班，甚至几个班的规则更具体。

因此：

p#recent {} 

比

body>p.news.recent {} 

并且当用户代理发现这两种，所述第一为准更加具体。

Answer 11

我能想到的唯一使用ID就是如果你有特异性战争 - 具有相同特异性的两个元素。应用一个ID会给你的元素提供更高的特异性 - 精确到+100。

因此，如果您有两种样式以相同的特异性定义，您可能希望通过对另一种样式应用更高的特异性来“破坏”一种样式。这就是说，可以通过太施加一个更具体的类，以该选择器实现相同的，这将提高10

ID = 100（#foo） 类= 10（的.bar） 元件增加特异性= 1（div）

Answer 12

我个人更喜欢使用ID作为静态页面元素（页眉，页脚）。原因是页面重量。

id =“h”比class =“h”轻。

我认为每个字节都很重要。

Answer 13

我在CSS中使用ID的主要原因是布局。如果我有一个页眉和页脚，则：

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

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

或者我的主内容或一个右侧边栏的一个包装。如果有人决定他们喜欢我的布局并希望查看源代码，很容易看到。