命名Dom元素Id属性的最佳实践

Question

这与DOM元素的id属性的命名约定有关，我猜也是name属性。谈到JavaScript，从我理解和完成的工作总是使用驼峰案例，除了类的名称。课程是Pascal的。

说过我主要在ASP.NET中开发，这里我遇到了id属性的命名问题。在ASP.NET中，如果你将一个新的服务器控件拖放到一个页面（我很少这样做，我是一个类型的标记有点人），默认名称总是Pascal，因为它们需要符合.NET框架服务器端代码的命名准则。

因此，当涉及命名ASP.NET服务器控件的id属性或仅标记标记中的元素时，我遵循规则来使用id属性（Javascript命名准则），但这与.NET命名准则冲突。

那么，一个，你们通常会为DOM元素中的id属性做什么，以及两个在ASP.NET中开发的.NET人员为命名id属性做了什么呢？

最重要的是，当我在标记中创建表单元素时，我通常使用匈牙利表示法来输入文本，例如

<input type="text" id="txtUserName" />

或类似

的复选框

<input type="checkbox" id="chkSelectAll" />

这肯定违反了.NET服务器端代码命名准则以及JavaScript准则。

非常感谢任何建议。

Answer 1

• 保持语义。使用完整，简单（最好是英文）的单词。不要试图想出一些花哨或技术性的东西，也不要描述是什么 - 我们知道。描述做什么。描述目的增加了信息价值。

• 不要缩写任何东西！ BW_RCB01_SW对于多年前使用我们的CSS的团队来说意味着什么，但现在对我来说没有任何意义，我必须向后工作以尝试翻译BW_RCB01_SW对应于我的目的，并记住翻译或将其记录在某处。更好？ blackwhite-boxtype1-bottomleft。它更长，但也不需要Rosetta石头。

• 将它全部保持为小写并使用下划线或连字符。我更喜欢连字符，但这完全是一种偏好。使用连字符应该没有任何障碍，因为它们不是在CSS或HTML中保留的，并且ID在每种其他语言中都被视为文字字符串。小写是所有经验 - 浪费了太多时间，想知道为什么这种风格不适用哦。 pageContainerLeft与pageContainerleft不同。

• 确定完全该元素是什么，但不再是。认真考虑您在名称中嵌入的每条信息以及是否有必要。在您的示例中 - 您需要知道它是ID的复选框吗？不太可能。你已经知道你所指的是哪个元素，因为它是一个唯一的ID，你必须对该元素进行编码。

Answer 2

尽可能少地命名对象肯定有助于保持清洁。如果你可以通过命名父母而只是提到孩子，那就更好了（在我看来）。您可以获得每页上向客户端呈现的html略少的奖励。

因为当我必须命名元素时，我更喜欢所有小写，并使用下划线表示法。我之前因为没有在CSS文件中使用我的案例而被骗了，所以如果我能早点把它当作一个问题，这就是一种解脱。

下划线是字符，而破折号可以解释为减号，因此这是另一个潜在的问题 - 只有坚持使用下划线才有意义。例如，Flex不接受带有以破折号命名的属性的XML（我知道这些值不是属性;但仍然是安全的赌注）。

我同意上述内容 - 没有元素类型或定位或颜色作为类/ id。匈牙利符号==坏。确定ID是什么非常有用。我喜欢以特定于对象的方式命名表单字段 - user_login, user_email, user_address_state_id, user_address_country_id等，可能都会显示在用户注册表单上。通常非表单字段对于下划线来说不够长，否则您可能可以重命名它们。

Answer 3

信不信由你，但在使用某些javascript库时，我遇到了连字符作为id和css类名称的问题。这是非常罕见的，但你显然想避免这样的事情。因此，我使用驼峰或下划线。您也可以使用下划线。

否则一般规则是拥有易于阅读和理解的有意义的名称。说到“控件”，请确保遵循某种命名约定。我个人更喜欢postfixes而不是前缀（即nameText而不是textName）但我尽量避免使用postfixes，因为我觉得它们太冗长了。

所以：  1.有意义的名字。  2.避免使用post / prefix。  3.避免使用缩写（即地址而不是地址）。  4.慢慢来。

Answer 4

以下是一些帮助我使用DOM中的ID和类的命名指南：

• 不要在名称中包含类型（即没有txt或chk）。我可以使用CSS或jQuery更具描述性地选择该信息
• 在名称中使用下划线作为分隔符。连字符并不总是用其他语言编写，而且在标记中读取骆驼套管有点难以理解

Answer 5

我上一份工作中的一位HTML大师实际上建议使用破折号分隔多字ID

<input type="text" id="user-name" />

我很难记住原因 - 我再也无法访问这些内部标准文档了。我知道，但是真的没有回答你关于Pascal vs Camel套管的问题。

我个人建议不要使用HN - 我发现这是一种非常令人憎恶的做法。如果您需要将复选框数组更改为选择元素，会发生什么？现在元素的ID具有伪造的语义。这不值得麻烦，IMO。