135

<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?

Improve this question
0

8 Answers 8

Reset to default
158

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'];

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I don't understand something about your post here, perhaps you can clarify. So you say that some browsers register the html id's as global objects and that if you put a hyphen in the id then you will guarantee that there will be no conflict between these auto-generated objects and the ones that you create because hyphens are not allowed. But how then does the browser create these hyphenated objects if hyphens are not allowed? seems like it would have to strip them, thus leaving you with the potential of a naming conflict.
@DallasCaley if you didn't see, this answer was update calling out window['message-text'];
Ah i think i get it. Strange that javascript doesn't allow you to create an object with a dash in the name as a stand-alone object, but it will allow you to create an object with a dash in the name if it is created as a property of another object that doesn't have a dash in the name.
This post actually caused me to rethink my position into almost 100% agreement with you from a position of no that is silly, my only reservation is given your position on the issue it seems evident that every id should have a - in it to prevent the same issue unless you specifically want it to work for some particular ids.
In 2024 we have ES Modules, so polluting the global variable namespace is something we should be avoid, so the advantage of this way is not too applicable anymore
104

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 {}
Improve this answer

5 Comments

What about BEM notation?
@IulianOnofrei you are of course free to use BEM, but it clearly does not adhere strictly to the Google Style Guide.
hmm, very weird. The GWT framework from google uses camelcase. Check this line of code <h1 id="appTitle"></h1> in the following docu. gwtproject.org/doc/latest/tutorial/i18n.html
Google != automatically right. They often are, but just being Google isn't enough of a justification.
This is a really bad idea. Sooner or later you will want to use your name in a programming language that doesn't support hyphens in variable names (basically all of them), and then BOOM! Idiotic renaming rules.
6

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).

Improve this answer

1 Comment

you're right but it will seem much messier in that surrounding "html jungle"
5

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.

Improve this answer

1 Comment

this question is similar and verifies this answer stackoverflow.com/questions/70579/…
3

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.

Improve this answer

4 Comments

Yes, you can use colons and periods for Ids, but that's a good way to get the person writing the CSS file to hate you.
A HTML identifier ZZ:ZZ would have to be escaped as ZZ\00003AZZ (CSS2 and above).
I didn't say it was good practice, I said it was valid.
Sounds like a fun way to make jQuery explode
0

I use the first one (one-two) because its more readable. For images though I prefer the underscore (btn_more.png). Camel Case (oneTwo) is another option.

Improve this answer

Comments

0

Actually some external frameworks (javascript, php) have difficulties (bugs?) with using the hypen in id names. I use underscore (so does 960grid) and all works great.

Improve this answer

1 Comment

Which ones? Anyway, code-readability is much more important thing.
-1

I would suggest underscore mainly for the reason of a javascript side-effect I'm encountering.

If you were to type the code below into your location bar, you would get an error: 'example-value' is undefined. If the div were named with underscores, it would work.

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

2 Comments

That should be document.getElementById("example-value"), which will work fine.
I am getting a similar problem with ASP.NET MVC when specifying a value for an attribute in the HtmlAttributes parameter of Html helper functions.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.