CSS: camelCase vs under_score

Question

There is much to read out there concerning this old question. Most languages seem to have their preferred style - and everythings ok with this.

But what about this question of style in the CSS context? Both is correct and looks fine:

someContainerContent vs. some_container_content

What do you think?

• Which is your and what do you think is the community's preferred style?
• Do you see advantages in one or the other?
• Or just disadvantes?

I'm currently writing java and ruby and so I'm switching between both all the time. In CSS I often catch myself by writing both, which is quite troublesome.

Please provide my some help to decide which case to use and have my code awesome styled! ;)

Answer 1

That is totally up to you. Here at my work we use hyphens, like

.some-container {
  color: red;
}
    .some-container div {
      color: blue;
    }

It just doesn't matter. Follow your team rules, that's all.

Answer 2

The most typical style is to separate words with hyphens "-".

div.some-container-content
{
}

The underscore and camelCase versions however have a little advantage - double-click (in Visual Studio) selects the complete word. In case with hyphens it will only select a part of the word surrounded by hyphens.

Answer 3

I personally prefer to keep my classes lowercase, so use the some_container_content variant.

There's no particular advantage to be gained by using one over the other, just use what's already there if you're working on existing code, or choose whichever you find easier to read.

Answer 4

I use hyphens with class names and camel case for IDs.

but i NEVER use underscores, purely because I think it looks messy :D

It doesn't really matter though, just pick one you find you can read easiest and make sure you stick to it to help your self out in the future (and others that may edit your stylesheets).

Answer 5

In most IDEs & editors underscores work with autocompletion & double click select hyphens can block autocompletion & double-click select.

Therefore as there is no language guideline on the issue, I would prefer to use underscores.

Answer 6

We use camel case because of a method we use for loading CSS selectors into JSON objects using PHP. Hyphenated class/id names aren't valid as JS object members.