【发布时间】：2009-12-16 01:38:59
【问题描述】：
最近我一直在做很多前端工作。这里的一些开发人员一直将他们的元素命名为“divPhotoGalleryContainer”，有时我只会看到“galleryContainer”。
有没有好的命名约定？添加“div”真的有用吗？
【问题讨论】：
【发布时间】：2009-12-16 01:38:59
【问题描述】：
愚蠢的是，像 divPhotoGalleryContainer 这样的匈牙利符号在 CSS 中是完全不需要的。您可以将 ID 命名为 PhotoGalleryContainer 并将其定位到 CSS 中的 <div> 元素：
div#PhotoGalleryContainer {
/* rules */
}
在该规则中，您通常可以假设某些属性，例如 display: block，除非您将通用 div 定位到其他地方（有点不好）。
实际上并没有任何特定的命名约定，只需使用清晰简单的名称即可。
【讨论】：
-
另一件事也是，如果 divPhotoGalleryContainer 以后不再是 div 会发生什么？如果 ulProductList 变成 ol 怎么办？
-
你不需要用 id 推断元素的类型，因为 id 是唯一的。但是，您可以在这个假想的示例中使用匈牙利符号：#passwordContainer，因为它很容易与#passwordLabel 和#passwordInput 区分开来
-
@ribot 从技术上讲，您可以将 ID 应用于不同页面上的不同元素。话虽如此，自这个问题以来 3 年的公众共识是完全避免使用过度限定的选择器，除非确实必要，否则避免使用 ID 选择器。
我不认为它特别有用，但我也不认为它有害。一致性是最重要的约定。
【讨论】：
-
大声笑，我猜有人不同意，但没有足够的建设性来说明原因。
最佳命名约定是对参与项目的开发人员/设计人员有意义的命名约定。鉴于您问题中的两个示例，我愿意打赌“divPhotoGalleryContainer”包含“div”，因为：它在 CSS 选择器中被引用，或者某些 javascript 代码正在查看它并且它以某种方式有帮助 以了解 id 所指的元素类型。
“divPhotoGalleryContainer”约定看起来像是 Hungarian notation 的 HTML 风格。
【讨论】：
有一个命名约定是很好的，因为它可以让你跟踪你的元素和类，并且让你不必阅读 html 代码来找出哪个元素被命名为什么。这将在编写 css 和 javascript 时为您提供帮助。一个好的 id 命名约定应该包括：
- 一种区分密切相关元素的方法，例如 #passwordContainer 与 #passwordLabel 和 #passwordInput
- 结构名称而不是表示名称，例如#main-content 而不是#blue-square（因为颜色可能稍后会改变）。更多信息在这里：http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
- 一种区分相似元素的方法，例如在列出具有相同类型元素的不同帖子的页面上，您可以分别将它们命名为 #postContainer-43 和 #postContainer-95 用于帖子编号 43 和 95，并给出它们是 .post 或 .postContainer 类
【讨论】：
最重要的是，无论你使用什么方法，你都保持一致。
但是，我一直发现使用匈牙利类型符号“divPhotoGalleryContainer”和“txtLastName”很有帮助。它可以更轻松地将页面元素与其他变量（客户端和服务器端）区分开来。
【讨论】：
在这种情况下添加“div”是无害的。 正如 DisgruntledGoat 所说，匈牙利表示法对 CSS 来说是无用的（也就是说，除非您不想将类限制为一种元素类型），而且 Rob 的评论是正确的，您甚至可以更改元素并保持相同的类/ID ，但是，最近更好地理解代码可能会有所帮助。
我总是使用匈牙利符号，因为我已经习惯了。如果您习惯了某件事，请保留它，因为它比改变它更容易。在许多编码人员编写相同内容的环境中，除非有约定，否则您可以随心所欲地编写。然而，过度描述并不像描述不足那么糟糕。也就是说，我投票支持所有内容的综合名称，包括变量、函数、类、ID、XML 元素等。如果难以阅读，请使用更多/更好的空格/行。如果它增加了超出预期的文件大小，请缩小它。
【讨论】：