HTML：ID属性的命名约定

Question

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

是否有良好的命名惯例？添加“div”真的很有用吗？

Answer 1

愚蠢的是，像divPhotoGalleryContainer这样的匈牙利符号完全不需要CSS。您可以将ID命名为PhotoGalleryContainer，并将其定位到CSS中的<div>元素：

div#PhotoGalleryContainer {
  /* rules */
}

在该规则中，您通常可以假定某些属性，例如display: block，除非您将通用div定位到其他地方（有点不好的做法）。

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

Answer 2

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

Answer 3

最佳命名约定是对项目中涉及的开发人员/设计人员有意义的约定。鉴于你的问题中的两个例子，我愿意打赌“divPhotoGalleryContainer”包含“div”，因为它们：它在CSS选择器中被引用，或者某些javascript代码正在查看它并且它以某种方式有帮助< / em>知道id引用的元素类型。

“divPhotoGalleryContainer”约定似乎是Hungarian notation的HTML-ish风格。

Answer 4

最好有一个命名约定，因为它会让你跟踪你的元素和类，并使你不必阅读html代码来找出哪个元素被命名为什么。在编写css和javascript时，这将对您有所帮助。 id的良好命名约定应包括：

• 一种区分密切相关元素的方法，例如#passwordLabel中的#passwordContainer和#passwordInput
• 结构名称而不是表示名称，例如#main-content而不是#big-square（因为颜色可能稍后更改）。更多信息：http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
• 一种区分相似元素的方法，例如在列出具有相同类型元素的不同帖子的页面上，您可以将它们分别命名为＃postContainer-43和＃postContainer-95，分别为帖子编号43和95，并给出他们是.post或.postContainer。

Answer 5

最重要的是，你使用的方法是一致的。

但是，我总是发现使用“divPhotoGalleryContainer”和“txtLastName”的匈牙利类型表示法很有帮助。它可以更容易地将页面元素与客户端和服务器端的其他变量区分开来。

Answer 6

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

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