Have Geek Brain

My_css_class VS my-css-class

Which one is between

.my_css_class{}

... and ...

.my-css-class{}

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

+1


a source to share


7 replies


One of the reasons for the underscore transition is that it is consistent with naming variables and types in other languages ​​(C *, Java, etc.). I think it's a little better to go with something familiar to make it more natural to read the source (and faster).



Otherwise, other suggestions made good sense. Perhaps you can quickly chat with your team and go with what works best for everyone.

+2


a source


Either everything is fine - I would choose the one that you (and your colleagues) find the most readable. You won't find any gains or losses with either, it's just an aesthetic choice.



But whatever you do - once you choose a style - stick to it . Consistency is key to making these decisions.

+8


a source


I would go with a hyphen. Because there are browsers that don't understand underscores in class names because they are not yet allowed in CSS 1.

+4


a source


I prefer to underline hyphens, since the underscore is an extra keystroke - which you can be trivial since it doesn't matter, and in my opinion, they are both equally readable.

+3


a source


I prefer the underscore because in Vim they are word separators and it is extra work to highlight the entire name.

+3


a source


I agree with everyone here - none is better, but pick one and stick with it .

I personally use hyphens for the same reason as Andrew, they are easier to type. However, I also use underscores to target the jQuery class.

This way I can have ".modal-popup" for styles.

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

This is kind of a hack, but a good way to get around the HTML selectable attribute limit.

+2


a source


If you are using hyphens, you can use an |=

attribute selector to select a group of classes based on the first part of the class name:

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

The browser has different support for this type of selector.

0


a source






More articles:


All Articles