Emanuil Rusev Emanuil Rusev - 4 months ago 7
HTML Question

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?

Answer

Use Hyphens to ensure isolation between your HTML and you JavaScript.

Why? see below.

Hyphens are valid to use in CSS and HTML but not for JavaScript Objects.

A lot of browsers register HTML Ids as global objects on the window/document object, in big projects this can become a real pain.

For this reason I use names with Hyphens this way the HTML ids will never conflict with my JavaScript.

Consider the following:

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.getElementBtId('message'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementBtId('message'));
        objectContainer.messageClass.write('loaded');
    }
</script>

If the browser registers HTML ids as global objects the above will fail because message is not 'undefined' and it will try to create an instance of the HTML object By making sure a html id has a hyphen in the name conflicts like this can be prevented

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.getElementBtId('message-text'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementBtId('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

One remark, you can still access the HTML objects through the (for example) window object by using window['message-text'];