命名“class”和“id”HTML属性 – 破折号与下划线
<div id="example-value">或<div id="example_value"> ？
这个网站和Twitter使用第一种风格。 Facebook和Vimeo – 第二。
你使用哪一个？为什么？
使用连字符来确保您的HTML和JavaScript之间的隔离。
为什么？ 见下文。
连字符可以在CSS和HTML中使用，但不能用于JavaScript对象。
许多浏览器将HTML ID注册为窗口/文档对象上的全局对象，在大型项目中，这可能会变成真正的痛苦。
出于这个原因，我使用连字符的名字这样的HTML ID将永远不会与我的JavaScript冲突。
考虑以下：
message.js
message = function(containerObject){ this.htmlObject = containerObject; }; message.prototype.write = function(text){ this.htmlObject.innerHTML+=text; };
HTML
<body> <span id='message'></span> </body> <script> var objectContainer = {}; if(typeof message == 'undefined'){ var asyncScript = document.createElement('script'); asyncScript.onload = function(){ objectContainer.messageClass = new message(document.getElementById('message')); objectContainer.messageClass.write('loaded'); } asyncScript.src = 'message.js'; document.appendChild(asyncScript); }else{ objectContainer.messageClass = new message(document.getElementById('message')); objectContainer.messageClass.write('loaded'); } </script>
如果浏览器将HTML ID注册为全局对象，则上述操作将失败，因为消息不是“未定义”，并且将尝试创buildHTML对象的实例。 通过确保一个HTML ID在名称中有一个连字符可以防止下面的冲突：
message.js
message = function(containerObject){ this.htmlObject = containerObject; }; message.prototype.write = function(text){ this.htmlObject.innerHTML+=text; };
HTML
<body> <span id='message-text'></span> </body> <script> var objectContainer = {}; if(typeof message == 'undefined'){ var asyncScript = document.createElement('script'); asyncScript.onload = function(){ objectContainer.messageClass = new message(document.getElementById('message-text')); objectContainer.messageClass.write('loaded'); } asyncScript.src = 'message.js'; document.appendChild(asyncScript); }else{ objectContainer.messageClass = new message(document.getElementById('message-text')); objectContainer.messageClass.write('loaded'); } </script>
当然，你可以使用messageText或者message_text，但是这并不能解决问题，你以后可能会遇到同样的问题，在那里你会不小心访问一个HTML对象而不是JavaScript对象
一种说法是，你仍然可以通过使用window ['message-text']通过（例如）窗口对象访问HTML对象。
我会推荐Google HTML / CSS样式指南
它特别指出 ：
用连字符分隔ID和类名 。 为了提高理解性和可扫描性，除了连字符之外，不要将选定器中的单词和缩写连接到任何字符（包括任何字符）。
/* Not recommended: does not separate the words “demo” and “image” */ .demoimage {} /* Not recommended: uses underscore instead of hyphen */ .error_status {} /* Recommended */ #video-id {} .ads-sample {}
这真的可以归结为偏好，但是在特定的方向上可能会影响你编辑的编辑。 例如， TextMate的自动完成function在连字符处停止，但将以下划线分隔的单词视为单个单词。 因此，使用自动完成function（ Esc ）时，使用the_post类名称和id会比使用the-post更好。
我相信这完全取决于程序员。 如果你愿意的话，你也可以使用camelCase（但我认为这看起来很尴尬）。
我个人比较喜欢连字符，因为键盘上键入的速度更快。 所以我想说，你应该select你最喜欢的，因为你的例子都被广泛使用。
这两个例子都是完全有效的，你甚至可以把“：”或“。”混合在一起。 作为根据w3c 规范的分隔符。 我个人使用“_”，只是因为它与空间的相似性而是一个两个字的名字。
其实一些外部框架（JavaScript，PHP）有困难（错误？）与使用ID在名称炒作。 我使用下划线（960grid也是如此），所有的工作都很棒。
我会build议下划线主要是因为我遇到的JavaScript副作用的原因。
如果你要在下面的代码中input你的地址栏，你会得到一个错误：'example-value'是未定义的。 如果div是用下划线命名的，那就行了。
javascript:alert(example-value.currentStyle.hasLayout);
我使用第一个（一二），因为它更可读。 尽pipe我更喜欢下划线（btn_more.png），但对于图片来说。 骆驼案（oneTwo）是另一种select。
