HTML：ID属性的命名约定

最近我做了很多前端工作。这里的一些开发人员将他们的元素命名为“divPhotoGalleryContainer”，有时我只会看到“galleryContainer”

---

有好的命名约定吗？添加“div”真的有用吗？

最好的命名约定是对参与项目的开发人员/设计师有意义的命名约定。考虑到您问题中的两个示例，我愿意打赌“divPhotoGalleryContainer”包含“div”，因为：它在CSS选择器中被引用，或者一些javascript代码正在查看它，并且知道id所引用的元素类型会有所帮助

---

“divPhotoGalleryContainer”约定似乎是HTML风格的。

我不认为它特别有用，但我也不认为它有害。一致性是最重要的惯例。

最重要的是，无论你使用什么方法，你都要一致

---

然而，我总是发现使用匈牙利类型的符号“divPhotoGalleryContainer”和“txtLastName”很有帮助。它使区分页面元素与其他变量（客户端和服务器端）变得更容易。

愚蠢的是，匈牙利符号，如

divPhotoGalleryContainer

，在CSS中完全没有必要。您可以命名ID

PhotoGalleryContainer

，并将其定位到CSS中的

元素：

div#PhotoGalleryContainer {
  /* rules */
}

在该规则中，您通常可以假定某些属性，如

display:block

，除非您将目标锁定在其他地方的泛型div（有点糟糕的做法）

没有任何特定的命名约定，只需使用清晰简单的名称。

在这种情况下添加“div”并没有坏处。 正如Disgludgeoat所说，匈牙利符号在CSS中可能毫无用处（也就是说，除非您不想将类限制为一种元素类型），Rob的评论是正确的，您甚至可以更改元素并保留相同的类/ID，但是，最近更好地理解代码可能会有所帮助

---

我总是用匈牙利符号，因为我已经习惯了。如果你习惯了某样东西，就保留它，因为它比改变它容易。在许多程序员编写相同内容的环境中，除非有约定，否则您可以按照自己的意愿编写。然而，描述过度并不像描述不足那么糟糕。也就是说，我投票支持所有内容的综合名称，包括变量、函数、类、ID、XML元素等。如果难以阅读，请使用更多/更好的空格/行。如果它给文件大小增加了超出预期的内容，请缩小文件大小。

最好有一个命名约定，因为它可以让您跟踪元素和类，并避免您必须阅读html代码才能找到元素的名称。这将有助于您编写css和javascript。id的良好命名约定应包括：

• 区分密切相关元素的一种方法，如#passwordContainer与#passwordLabel和#passwordInput
• 结构名称而非表示名称，例如#主要内容而非#蓝色正方形（颜色可能会在以后更改）。更多信息请点击此处：
• 一种区分类似元素的方法，例如，在列出具有相同元素类型的不同帖子的页面上，您可以将它们分别命名为“postContainer-43”和“postContainer-95”以表示帖子编号43和95，并将它们命名为class.post或.postContainer

---

另一件事是，如果divPhotoGalleryContainer以后不再是一个div，会发生什么？如果ulProductList成为ol怎么办？您不需要推断具有id的元素的类型，因为id是唯一的。但是，您可以在这个虚构的示例中使用匈牙利符号：#passwordContainer，因为它很容易与#passwordLabel区分开来，以及#passwordInput@ribot从技术上讲，您可以将ID应用于不同页面上的不同元素。话虽如此，在这个问题提出三年后，公众的共识是完全避免过度合格的选择者，并避免ID选择者，除非真的有必要。哈哈，我想有人不同意，但没有足够的建设性来说明原因。可能的重复