HTML属性中命名“class”和“id”的区别是什么? 破折号与下划线的区别是什么?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

<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注册为全局对象,则上述操作将失败,因为该消息不是“undefined”的,它将尝试创建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对象;

用户回答回答于

我会推荐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 {}

扫码关注云+社区

领取腾讯云代金券