my_css_class VS my-css-class

Question

Which one between

.my_css_class{}

... and ...

.my-css-class{}

is the best way to go and why? Is it just best practice or is there another reason?

Answer 1

Either is OK - I would pick whichever one you (and your colleagues) find to be the most readable. You will find neither gains nor losses with either one, it is purely an aesthetic choice.

But whatever you do - once you pick a style - stick with it. Consistency is key for decisions like this.

Answer 2

I prefer hyphens to underscores since underscores are an extra keystroke--that's how trivial you can be since it makes no difference, and in my opinion they're both equally readable.

Answer 3

The one reason to go with the underscore style is that it's consistent with the naming of variables and types in other languages (C*,Java, etc). I think that it's a bit better to go with something familiar so that it's more natural to read the source (and faster).

Otherwise, the other suggestions given sound reasonable as well. Maybe have quick chat with your team and go with what works best for everyone.

Answer 4

I prefer underscores because in Vim - are considered word separators and it's extra work to highlight the entire name.

Answer 5

I agree with everyone here - neither one is better, but choose one and stick with it.

Personally I use hyphens for the same reason Andrew does, they're easier to type. However I also use underscores for jQuery class targeting.

So I can have ".modal-popup" for styles.

And then I can have "._rollover" for targeting and applying functionality to specific elements without worrying about applying unwanted styles. "._rollover" will never have any style information applied to it.

It's kind of a hack, but a good way to get around the limit amounts of selectable attributes in HTML.

Answer 6

I would go with the hyphens. Because there are browsers that don’t understand underscores in class names as they were not yet permitted in CSS 1.

Answer 7

If you use hyphens, you can use the |= attribute selector to select a group of classes based on the first portion of the class name:

/* Select open folders */
.folder-open { }
/* Select closed folders */
.folder-closed { }
/* Select both kinds */
*[class|="folder"] { }

Browser have varying support for that kind of selector.