类与ID - 可读性

Question

在处理选择课程与ID相比时，首选方法是什么？

例如，您可以拥有一堆可能相同样式的元素，并且可以使用相同的类。但是，出于可读性目的，有时候为每个元素设置一个唯一的ID会很好。

显然，你不想在每个元素都有ID的情况下过于荒谬。但是，你们在哪里画线并且使用所有你可能正在使用类的ID减慢显着的速度？如果是这样......何时？

Answer 1

如何停止删除语义HTML。

大多数人通过查看源代码和HTML以及修补HTML来学习HTML，了解<tag>foo</tag>的外观和运行方式。他们并没有真正深刻理解它，但他们继续做一些需要深刻理解的事情，副作用是你和成千上万的人每天都有的问题 - 他们正在做的事情他们并不完全了解这些工具是如何工作的，因为它表面上看起来很简单，而且强大的用途是隐藏的＃34;在有趣的手册中，没有人觉得需要阅读。 Everything is plainly explained and been written down for a long时间。

用于哪些ID（直接来自HTML4规范，带有我的笔记）

id属性为元素分配唯一标识符（它只发生在ONCE，从未发生过两次或更多，我已经厌倦了看到有人来到这个网站并且已经进入他们的代码在二十个元素中具有相同的ID）

id属性在HTML中有多个角色：

• 作为样式表选择器。 （这意味着，您可以使用它来描述CSS样式）
• 作为超文本链接的目标主播。（当您可以跳转到某个页面的某个部分时）
• 作为从脚本引用特定元素的方法。（document.getElementById（＆＃34; what＆＃34;））
• 作为声明的OBJECT元素的名称。
• 用于通用用户代理处理（例如，用于在将HTML页面中的数据提取到数据库中时识别字段，将HTML文档翻译成其他格式等）。

用于哪些类（直接来自HTML4规范，带有我的笔记）

class属性[...]将一个或多个类名称分配给元素（此内容可以重复用于您心中的内容）;该元素可以说属于这些类。类名可以由多个元素实例共享。 class属性在HTML中有几个角色：

• 作为样式表选择器（当作者希望将样式信息分配给一组元素时）。
• 供用户代理进行通用处理。 （基本上，它只是元素的另一部分）

什么？我不明白。

ID：它是某些东西的指纹，只有一个，您只需在整个文档中使用一次指纹。只有在需要提供ID时才使用它。你可能不想拥有数百个，甚至数十个。你很少需要开始制作这些。具体用途是针对目标锚点，在罕见边缘情况下提高选择器速度。一般情况下，您从未根据ID描述您的CSS，您可能会遇到一些边缘情况，例如#HEADER .body h1，这可能与您的#BODY不同，我仍然建议不要将它们设为ID真正的原因。

课程：与独特的指纹或链接到页面的各个部分无关，课程不能唯一识别某些内容。类描述了一组属于一起或应该以相同方式运行的事物。如果您参加了名为coffee的课程，那么您应该展示咖啡所期望的课程，如果您是一类手机，那么就像手机一样（不要提供咖啡）。 / p>

但是，我应该如何访问某些表格或第12列表项目的第6列中的第4个单元格？

这是人们不知道什么是HTML在空中举起并决定为所有元素分配ID的人。这是没有人正确解释HTML如何工作的全部副作用。这是一个很好的方式，说你没有早期RFTM或提问（在这种情况下，用户1066982，确实这样做，这太棒了，让我开心，我写这篇文章指的是其他人未来谁在HTML上失败了。

You need to start learning right now. Stop pretending you understand this stuff.

HTML不是<foo><bar>baz</bar>blah<ding/></foo>之类的文字字符串，确定您写 HTML的方式，但如果这是您认为的那样，那么您就不会了解浏览器中的HTML。

HTML是一种结构类似 XML的文档。 HTML文档有模型，这意味着他们不是平面文本。该文档的文本表示是浏览器可以采用平面文本并将其转换为树结构的一种方式。树就像数组一样，除了它们一个接一个地不是只是数组中的扁平元素，而是它们嵌套，因此一个元素可能指向其他几个元素。

下面不是如何编写HTML文本的图表（stolen from the w3c's spec on the Document Object Model），这是您的浏览器如何将其存储在内存中的图表：

因为它在记忆中是这样的，所以并不意味着＆＃34;哦，废话！我无法访问表格中第二个TR表格中的第一个TD！＆＃34;，这意味着您只需简单明了地向您的代码解释内部有子元素该表。

• JavaScript提供了一个完整的DOM API，允许您访问该DOM树中的每个节点。
• PHP提供了一个完整的DOM API，允许您访问该DOM树中的每个节点。
• C ++有一个完整的DOM API，允许您访问该DOM树中的每个节点。
• ASP提供了一个完整的DOM API，允许您访问该DOM树中的每个节点。
触及DOM的
• 一切 提供了一个完整的DOM API，允许您访问该DOM树中的每个节点，但抛出的子标准软件除外在解析HTML时徒劳无功的正则表达式。

使用DOM的API基于语义HTML访问这些节点。语义HTML意味着您的HTML结构很有意义。段落进入<p>标签，标题进入标题标签，依此类推。

在任何情况下，你永远都不需要通过使用ID标签攻击值来重现DOM API，因为你不知道你只能说getAllEmentsByTagName("td")[4]来获得第四个元素

如果您可以抓住getAllEmentsByName("td")[4]，则不需要<td id="id4">，然后getElementById("id4")，因为您不想学习一个其他API调用。我害怕有一天我需要保留一堆代码，这些代码留给那些觉得需要将ID粘贴到每个元素中的人，只是为了确保＆＃34;，特别是当我需要返回并插入一个成千上万的表中第五和第六个元素之间的新元素（你能想象取代每个id吗？特别是当这个特征在10年前被解释了？！疯狂！）

铊组成; dr

• HTML实际上只是一堆文字，只有一种方式可以访问它
• rtfm，不要假装你理解它，因为你可以做一些事情，你会让自己退缩。
• 不要在任何地方推送ID，只能在需要绝对的地方使用它们。
• 使用类来描述事物，而不是识别事物。
• ?????
• 利润。

Answer 2

  

但是，出于可读性目的，有时候为每个元素设置一个唯一的ID会很好。

这对我来说毫无意义。是什么让ID比类更具可读性？如果拥有身份没有任何好处，那么为一组相关元素中的每一个分配唯一标识符毫无意义。

对于它的价值，要意识到单个元素可以同时具有类和ID。如果您的元素需要以某种方式进行唯一标识，请为其提供ID。如果多个元素的样式相同且无论如何都是相似的，请使用类。 如果您的元素符合这两个条件，请为它们提供两个属性，并相应地使用每个属性。

Answer 3

不应将ID用于样式设置。请改用类。 ID具有非常高的特异性，并且难以覆盖（导致更多ID和更长的选择器链）。此外，ID用于JavaScript DOM选择，因此如果您在CSS中使用的是与JavaScript中使用的相同的ID，则将样式与脚本联系起来，这就是关注点的错误分离。

ID适用于JavaScript。类适用于CSS。

注意： JavaScript和特异性不是唯一的原因。其他包括片段标识符和代码重用。正如我在评论中所说，there are several smart people who advise against IDs（从那里开始并按照链接）

Answer 4

在设计时，我会同时使用id和class。对于特定项目，我将仅使用id。但是，如果您需要为不同的项目应用相同的样式，请使用类。您不能对不同的项使用相同的ID，因为ID仅针对一个项目。

Answer 5

我对具有明确责任的元素使用ID，具有相同演示文稿的元素的类，例如：

HTML：

<div id='sport-news'>
    <article class='news'>...</article>
    <article class='news'>...</article>
</div>

CSS：

.news { /* global styles */ }
[id=sport-news] .news { /* specific styles */ }

JavaScript的：

var sportNews = document.getElementById('sport-news') // faster
, news = sportNews.childNodes;

对我来说，[id] .class比.parent-class .child-class更具可读性。