是否应该将类或 id 添加到 HTML 文档中以获得更好的结构

Should one add class or id to a HTML document for better structure?

本文关键字：文档 结构 更好 HTML 添加 id 是否      更新时间：2023-09-26

通常我们为CSS和Javascript选择器添加id或class。当不需要选择器时，我们是否应该不放置id或class？

例：

# HTML
<div class="name">John Smith</div>
<div class="email>jsmith@abc.com</div>
# CSS
.name { color: red }

您会看到未使用.email。我们应该把它留在那里，还是删除它？最佳实践是什么？

切勿将 ID 或类添加到您的 HTML 中，除非它们的存在有特定的原因，例如深度链接到 ID、为 JavaScript 添加高级样式或钩子。

该类不执行任何操作，因此不需要它。浏览器读取它并减慢它的速度（几乎没有），但它仍然没有用。

在我看来，最好的做法是不要有一个不需要它的类，而是给自己写一个评论。如果你的代码很长/你过了一段时间才读到它，注释可能会帮助你理解它。

<div>jsmith@abc.com</div> <!-- This is the user's email address -->

不要将 Id 和类添加到您的 HTML 中，除非您打算使用它。

注意：仅对不同的元素使用 ID。对公共元素使用类，即，如果您想为公共元素应用样式，请转到类。

ID ro 类几乎没有区别，您正在谈论更好的结构。

它们是用于设置每个元素的视觉呈现样式的选择器。如果你从这个网站阅读了关于css的wiki文章：你会发现唯一的区别是重要性或我们所说的选择器优先级，你可以在这里阅读它：

https://stackoverflow.com/tags/css/info

选择器如下所示：

ID -->

类 --> 元素（DESC 顺序从重要）

另外，如果您不打算在 CSS 中使用它们，请尽量不要使用它们，我的意思是不要只使用 ClassNames 或 ID 来告诉这个div 是关于什么的，就像这样：

<div class="email">username@example.com</div>

但是使用这个： 

<div>username@example.com</div>

相反，尝试仅在要设置样式，更改字体大小字体系列或其他视觉效果时才使用CSS。

相关文章：