命名“class”和“id”HTML 属性 - 破折号与下划线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1696864/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Naming "class" and "id" HTML attributes - dashes vs. underlines
提问by Emanuil Rusev
<div id="example-value">or <div id="example_value">?
<div id="example-value">或者<div id="example_value">？
This site and Twitter use the first style. Facebook and Vimeo - the second.
本网站和 Twitter 使用第一种风格。Facebook 和 Vimeo - 第二个。
Which one do you use and why?
您使用哪一种？为什么？
回答by Raatje
Use Hyphens to ensure isolation between your HTML and JavaScript.
使用连字符确保 HTML 和 JavaScript 之间的隔离。
Why? see below.
为什么？见下文。
Hyphens are valid to use in CSS and HTML but not for JavaScript Objects.
连字符可用于 CSS 和 HTML，但不适用于 JavaScript 对象。
A lot of browsers register HTML Ids as global objects on the window/document object, in big projects, this can become a real pain.
许多浏览器将 HTML Id 注册为 window/document 对象上的全局对象，在大项目中，这会成为一个真正的痛苦。
For this reason, I use names with Hyphens this way the HTML ids will never conflict with my JavaScript.
出于这个原因，我使用带连字符的名称，这样 HTML id 永远不会与我的 JavaScript 冲突。
Consider the following:
考虑以下：
message.js
消息.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};
html
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>
If the browser registers HTML ids as global objects the above will fail because the message is not 'undefined' and it will try to create an instance of the HTML object. By making sure an HTML id has a hyphen in the name prevents conflicts like the one below:
如果浏览器将 HTML id 注册为全局对象，则上述操作将失败，因为消息不是“未定义”，它将尝试创建 HTML 对象的实例。通过确保 HTML id 在名称中包含连字符可以防止如下冲突：
message.js
消息.js
message = function(containerObject){
this.htmlObject = containerObject;
};
message.prototype.write = function(text){
this.htmlObject.innerHTML+=text;
};
html
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>
Of course, you could use messageText or message_text but this doesn't solve the problem and you could run into the same issue later where you would accidentally access an HTML Object instead of a JavaScript one
当然，您可以使用 messageText 或 message_text 但这并不能解决问题，以后您可能会遇到同样的问题，您可能会意外访问 HTML 对象而不是 JavaScript 对象
One remark, you can still access the HTML objects through the (for example) window object by using window['message-text'];
一句话，您仍然可以通过使用 window['message-text']; 通过（例如） window 对象访问 HTML 对象；
回答by Klas Mellbourn
I would recommend the Google HTML/CSS Style Guide
我会推荐Google HTML/CSS Style Guide
它特别指出：
Separate words in ID and class names by a hyphen. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.
用连字符分隔 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 {}
回答by Doug Neiner
It really comes down to preference, but what will sway you in a particular direction might be the editor you code with. For instance, the auto-complete feature of TextMatestops at a hyphen, but sees words separated by an underscore as a single word. So class names and ids with the_postwork better than the-postwhen using its auto-complete feature (Esc).
这确实归结为偏好，但会在特定方向上影响您的可能是您编码时使用的编辑器。例如，TextMate的自动完成功能在连字符处停止，但将下划线分隔的单词视为单个单词。因此，与使用其自动完成功能 ( )the_post相比the-post，类名和 id 的效果更好Esc。
回答by adamse
I believe this is entirely up to the programmer. You could use camelCase too if you wanted (but I think that would look awkward.)
我相信这完全取决于程序员。如果你愿意，你也可以使用camelCase（但我认为这看起来很尴尬。）
I personally prefer the hyphen, because it is quicker to type on my keyboard. So I would say that you should go with what you are most comfortable with, since both your examples are widely used.
我个人更喜欢连字符，因为在我的键盘上打字更快。所以我会说你应该选择你最喜欢的，因为你的两个例子都被广泛使用。
回答by Myles
回答by DavidHavl
Actually some external frameworks (javascript, php) have difficulties (bugs?) with using the hypen in id names. I use underscore (so does 960grid) and all works great.
实际上，一些外部框架（javascript、php）在 id 名称中使用连字符有困难（错误？）。我使用下划线（960grid 也是如此）并且一切都很好。
回答by eozzy
I use the first one (one-two) because its more readable. For images though I prefer the underscore (btn_more.png). Camel Case (oneTwo) is another option.
我使用第一个（一两个），因为它更具可读性。对于图像，虽然我更喜欢下划线 (btn_more.png)。Camel Case (oneTwo) 是另一种选择。
回答by jgreep
I would suggest underscore mainly for the reason of a javascript side-effect I'm encountering.
我建议使用下划线，主要是因为我遇到了 javascript 副作用。
If you were to type the code below into your location bar, you would get an error: 'example-value' is undefined. If the div were named with underscores, it would work.
如果您在地址栏中键入以下代码，您会收到错误消息：'example-value' 未定义。如果 div 用下划线命名，它会起作用。
javascript:alert(example-value.currentStyle.hasLayout);
