Hyphens or underscores in CSS and HTML identifiers?

Question

As both hyphen (-) and underscore (_) are valid characters in CSS and HTML identifiers, what are the advantages and disadvantages using one or the other? I prefer writing CSS class names with hyphens (e.g. field-text) and underscores for IDs (e.g. featured_content). Is there a best practice or it's only the matter of taste?

Answer 1

I think its just personal preference.

I prefer using underscore.

Answer 2

I don't know of any official practices, but I tend to use hyphens where they are allowed. Underscores might be better if you intend to directly map identifiers from programming languages to your CSS/HTML, but I haven't had any projects like that in my career. I don't like underscores because you need to press Shift in order to type them whereas hyphens are just a single press of a key.

No matter which way you go - do not mix those two without clear rules, because you'll be lost trying to remember which one you used here or there.

Answer 3

For most people, underscores are unnatural. Since CSS is often written and edited by web designers, i.e. normal people, using hyphens is better. In fact, many non-programmers don't even see the underscore, i.e. if they spelled an identifier out loud they would say "dash" for the underscore.

Answer 4

It's really just preference, but if you are going to be doing programming to manipulate the DOM or passing identifiers such as form names to programming languages, usually underscores are nicer.

For example:

<input type="text" name="my_input" id="my_input" />

<input type="text" name="my-input" id="my-input" />

If you are scripting it, you can do var my_input = document.getElementById('my_input'); or parse the incoming value when POSTed to php with <?php $my_input = $_POST['my_input']; ?>. However, the dashed version won't be translatable in either JavaScript or PHP because dashes are not allowed there.

You forgot to mention that camelCase, like myInput would be yet another convention for classes and ids.

I'd be interested in hearing how other folks do it.

Answer 5

As the fellow SOists stated, now its a matter of taste. However if you have to support old school browsers, consider using hyphen and forget the underscore - all those legacy browsers had problems, see this reference.

Using camelCased class and id names is an other good practice. I personally use hyphens or very short names eg. .tagline or #menu avoiding verbosity and still taking care of semantics.

Answer 6

I use underscores and the only reason that i am doing so is when in an editor when you double click an underscore seperated text it will select all text including underscore, if you do the same on the text with hyphens it will only select till the first hyphen.

for example:

"my_item" if you double click on this, selected text will be my_item,

"my-item" if you double click on this, selected text will be either my or item and if it is like "my-really-long-named-item-has-a-class-name" it is getting really annoying to select the text, even you use your keyboard.

which i find useless, but the choice is highly upto programmer, which you find is best is the best.

Also this text selection issue might be different on some editors, but generally this is inherited from operating system's default behaviour. You can also try on this post, it will probably select as i pointed.

Sinan.

Answer 7

I remember reading that there used to be browsers that didn't properly handle underscores (edit: it was the actual CSS1 spec that did not allow underscores unless escaped. here is a 2001 article by none other than Eric A. Meyer explaining the problem with underscores in class/id names). That was long ago and it's really just a personal preference now, but there are historical reasons why one might still avoid underscores.

I personally prefer hyphens because they're: 1) easier to type 2) most (mac) applications treat hyphens as word separators and underscores as part of a word (when double clicking on the text). I find it easier to work with when you use any kind of namespacing in your class/id names (nav-main, nav-secondary, nav-utility, etc). 3) I usually use underscores in javascript variables. And it's a little easier to tell the js vars with underscores apart from the class/id names with hyphens.

The other option is to use camelCase class and id names. Personally camelCase class and id names drive me crazy as I'm of the opinion that all HTML should be lowercase including class/id names. But it can be argued that camelCase does save a small amount of file size.

Answer 8

I use hyphens. Hyphens are used for pseudo-classes so why not continue that pattern for classes?

For IDs I tend to swap back and forth between camelCase and hyphens. Using camelCase emphasizes that this is an unique object and I usually only use IDs when I need to do something with the object from script. But using hyphens for IDs have the advantage that there aint much work if you change your mind and want to turn that ID identifier into a class instead.

Answer 9

In CSS I tend to use hyphens, since that's what the practice is for CSS properties: text-decoration, background-color, etc. In Javascript, I tend to use camel case for the same reasons: textDecoration, backgroundColor.

However, what I really wanted to point out (which is only slightly off-topic) is that for naming of images and urls, you should use hyphens as they are read as different words and benefit SEO better: http://www.mattcutts.com/blog/dashes-vs-underscores/

That's the only case that I know that naming conventions actually have an impact.

Answer 10

In Adobe Flex, you use Camel Case.

This article seems to think its a CSS 2 standard to use:

First and foremost, for those of you coming from a Web design background, it's important to understand that Flex CSS does not follow the same conventions as the W3C CSS spec. The hyphen (-) used to separate words in the W3C CSS Version 2.0 specification isn't used as part of the code convention in the Flex implementation. Instead, the Flex implementation of CSS uses camel case. For example, vertical-center in the W3C CSS2 spec is equivalent to verticalCenter in Flex CSS. If you're already programming in a language that uses camel case however, this is pretty easy to get used to. The good news is that most of what's available in the CSS 2.0 specification is also available with the Flex CSS implementation. Furthermore, the Flex implementation of CSS expands significantly on the CSS 2.0 W3C standard, offering additiona style properties that are unique to the Flex components.

Answer 11

Never use underscore

example:

<input type="text" id="begin_stand" name="begin_stand"  value="10" size="8" maxlength="8">

will give error in javascript like

beginst = document.getElementById('begin_stand').value;
Error : object doesnt support this etc.

Good code:

<input type="text" id="beginstand" name="beginstand"  value="10" size="8" maxlength="8">

will NOT give error in javascript like

beginst = document.getElementById('beginstand').value;

Now dont make the mistake to give the id and the var in java the same name. Like this

<input type="text" id="beginstand" name="beginstand"  value="10" size="8" maxlength="8">
beginstand = document.getElementById('beginstand').value;

Will give you scripterror cause beginstand is used double.

Hope this helps

Ed

Answer 12

The only potential problem is if you were to manipulate those identifiers with a programming language that would mistake the hyphen as a minus sign and think you are trying to perform a math operation, subtraction in this case.