How should my class names be?
For example, a CSS class for a vote count, how should I name it?
.vote-count-post (1) // SO uses this
.VoteCountPost (2)
.voteCountPost (3)
.vote.count-post (4)
.vote .count-post (5)
.vote .count.post (6)
4, 5 and 6 are special
.vote.count-post matches elements with class="vote count-post", or class="count-post vote" or even class="vote something-else count-post"..vote .count-post matches elements with class="count-post" that are subelements of an element with class="vote".vote .count.post is a mix of those bothBetween 1, 2 and 3, all that matters is preference of style. Some people prefer one over another just as they do in programming languages. So just choose whatever you personally prefer, or what is more appropriate for you.
I vote for (1) to always use lower case for your CSS. That way you don't have to remember where you capitalize stuff. So that eliminates (2) and (3).
(5) is really two different elements so can't apply to a single element.
(4) and (6) are invalid for a single element. (4) assumes you are applying two classes to the same element such as class='vote count-post'. (6) is a combination of (4) and (5).
It's just naming, so it's up to you what you like. Either of your examples would work fine. Just pick one and stick to it.
The three first selectors addresses single elements, the fourth addresses a single element with two classes, the fifth addresses an element inside another, and the sixth does the same but with the inner ellement having two classes.
I would probably put class="Vote" on the surronding element, and out class="count" on the count element inside it to address it. I use pascal case for surrounding elements and lowercase for child elements inside them, so I would use:
.Vote .count
count? That way it would serve as both a child elment and a surrounding element.
I see the first approach a lot (the jQuery UI CSS framework uses it and I find it a very good example for good CSS).
I personally don't like camelcasing in class names from (2) and (3) because it is really easy to get it wrong (just write VotecountPost and it won't work).
(4), (5), (6) are not really a convention thing but rather different selectors as others pointed out already.
I agree with Keltex above that always using lower case is easier and more maintainable ... especially for others who might need to troubleshoot or modify your work.
Yet, I'd also suggest adding a prefix your css class names. In large projects this helps to quickly identify their source and what they apply to. It also helps prevent name collisions (and unpredictable behavior) in a heterogeneous environment.
There's no "right" answer in my opinion. I tend to do what's more readable so I choose (3). In my opinion there's enough word-word-word style text in html/css already. And when styling up e.g. Wordpress I think it's like a mixer full of dashes, hard to navigate.
But it's my opinion, I think you should just get a feel for what you prefer. What you find easy to read, when you look 8 hours per day on these you should choose something you're comfortable with.
In my projects that use jQuery I have determined that I use class names in two distinct ways. The first is for styling where definitions are almost exclusively in a .css file. The second is for jQuery selectors which tend to be isolated to a single function and are more related to the scripting. Because of this split I choose to follow #1 for styling and #2 for jQuery element selectors. If someone chooses to View Source they can now determine the functions of each type of class.
