Question

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)

• What are the advantages and disadvantages of each?
• Which is most used and why?
• Are there any implications in any of these?
• May I have any uppercase in my CSS?

Answer 1

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