Naming "class" and "id" HTML attributes - dashes vs. underlines

Question

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

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 dash, 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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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