Menu
The HTML 4.01 spec states that ID tokens must begin with a letter ( [A-Za-z] ) and may be followed by any number of letters, digits ( [0-9] ), hyphens ( - ), underscores ( _ ), colons ( : ), and periods ( . ). For the class attribute, there is no such limitation.
Always favor lowercase, for elements, for attributes and their values, for classes and ids. Multi-word names for classes and ids should either 1., concatenate the words in lowercase without any in-between character, or 2., separate each word with a "-" (not "_") and maintain lowercasing throughout.
Difference between id and class attribute: The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements.
Use Hyphens to ensure isolation between your HTML and 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.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>
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'];
I would recommend the Google HTML/CSS Style Guide
It specifically states:
Separate words in ID and class names by a hyphen. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.
/* 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 {}
It really comes down to preference, but what will sway you in a particular direction might be the editor you code with. For instance, the auto-complete feature of TextMate stops at a hyphen, but sees words separated by an underscore as a single word. So class names and ids with the_post work better than the-post when using its auto-complete feature (Esc).
I believe this is entirely up to the programmer. You could use camelCase too if you wanted (but I think that would look awkward.)
I personally prefer the hyphen, because it is quicker to type on my keyboard. So I would say that you should go with what you are most comfortable with, since both your examples are widely used.
Either example is perfectly valid, you can even throw into the mix ":" or "." as separators according to the w3c spec. I personally use "_" if it is a two word name just because of its similarity to space.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With