Naming "class" and "id" HTML attributes - dashes vs. underlines

<div id="example-value"> or <div id="example_value">?

This site and Twitter use the first style. Facebook and Vimeo - the second.

Which one do you use and why?

82635 次浏览
小开

我相信这完全取决于程序员。如果你愿意，你也可以使用 camelCase (但是我觉得那样看起来会很尴尬)

我个人更喜欢连字符，因为在键盘上打字更快。因此我想说，您应该选择您最喜欢的方式，因为您的两个示例都被广泛使用。

小开

任何一个例子都是完全有效的，您甚至可以混合使用“ :”或“”作为分离器根据 w3c 规格。我个人使用“ _”，如果它是一个两个字的名称，只是因为它的相似空间。

小开

我建议主要由于我遇到的 javascript 副作用而强调。

如果您将下面的代码键入到您的位置栏中，您将得到一个错误: “ example-value”未定义。如果将 div 命名为下划线，那么它就可以工作。

javascript:alert(example-value.currentStyle.hasLayout);
小开

我使用第一个(一二) ，因为它更易读。对于图片，我更喜欢下划线(btn _ more. png)。骆驼箱(oneTwo)是另一种选择。

小开

这实际上取决于您的偏好，但是在特定方向上影响您的可能是您所使用的编辑器。例如，TextMate的自动完成功能在连字符处停止，但是将由下划线分隔的单词视为单个单词。因此，使用 the_post的类名和 ID 在使用其自动完成特性(Esc)时要比使用 the-post好。

小开

实际上，一些外部框架(javascript、 php)存在一些问题(bug?)在 ID 名称中使用连字符。我使用下划线(960grid 也是如此) ，所有的工作都很好。

小开
最佳答案

Use Hyphens to ensure isolation between your HTML and JavaScript.

Why? see below.

连字符可以在 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>

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:

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 对象

一个注意，你仍然可以通过(例如)窗口对象访问的 HTML 对象通过使用窗口[‘ message-text’] ;

小开

I would recommend the 谷歌 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 {}

提交答案