Question

<div id="example-value">或<div id="example_value">？

此网站和Twitter使用第一种风格。 Facebook和Vimeo--第二个。

你使用哪一个？为什么？

Answer 1

使用连字符确保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注册为全局对象，则上述操作将失败，因为该消息不是“未定义”，它将尝试创建HTML对象的实例。通过确保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对象;

Answer 2

我会推荐Google HTML/CSS Style Guide

specifically states：

用连字符 分隔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 {}

Answer 3

这实际上归结为偏好，但是在特定方向上影响你的东西可能是你编码的编辑器。例如，TextMate的自动完成功能在连字符处停止，但会将由下划线分隔的单词视为单个单词。因此，使用其自动完成功能（the_post）时，the-post的类名和ID的效果优于Esc。

Answer 4

我相信这完全取决于程序员。你也可以使用camelCase（但我觉得这看起来很尴尬。）

我个人更喜欢连字符，因为在键盘上键入更快。所以我会说你应该选择你最熟悉的东西，因为你的两个例子都被广泛使用。

Answer 5

这两个例子都是完全有效的，你甚至可以投入混合“：”或“。”根据w3c spec作为分隔符。我个人使用“_”，如果它是一个双字的名字，只是因为它与空间的相似性。

Answer 6

我使用第一个（一两个），因为它更具可读性。对于图像虽然我更喜欢下划线（btn_more.png）。 Camel Case（oneTwo）是另一种选择。

Answer 7

实际上一些外部框架（javascript，php）在id名称中使用连字符有困难（错误？）。我使用下划线（960网格也是如此），一切都很棒。

Answer 8

我建议使用下划线主要是因为我遇到了javascript副作用。

如果您在下面的代码栏中输入以下代码，则会收到错误：'example-value'未定义。如果div用下划线命名，它就可以工作。

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

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

8 个答案: