命名"class"和"id"HTML属性 - 破折号与下划线

这个网站和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

如果浏览器将HTML ID注册为全局对象,则上述操作将失败,因为该消息不是"未定义",并且它将尝试创建HTML对象的实例.通过确保HTML ID在名称中有连字符可以防止如下所示的冲突:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

HTML

当然,您可以使用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 {}