Using uppercase, dashes or underscores when naming css selectors

Question

What are the best practices when naming CSS selectors?

SomeContainerContent
some_container_content
some-container-content

I read the other similar questions here on stack overflow, but there is no general consensus in the answers. I was wondering if anyone else had more to add.

Answer 1

I really think that it is up to you. However, what is important is to be consistent. For example, I like to use underscores for ids and dashes for classes.

Answer 2

It really does not matter and comes down to your personal taste. However, for a project it should be consistent! So, if there is already a css present, go for the style set by this style.

Answer 3

I use dashes (-) for everything HTML/CSS and underscores for PHP variables. Keeps things organised for me.

Answer 4

I use dashes. Probably because lots of things on the web are case sensitive and I'm in a habit of using all lowercase for file names and such already when working on the web. Underscores are hard to see when underlined, so I shy away from them as well.

Seems most people CamelCase though:

poll on what people use

Answer 5

The general thought is to use hyphens. There are, in fact, potential compatibility issues with other options.

• Underscores are not allowed in class names or IDs in certain (granted, old, NS4-type) browsers.
• The CSS spec does not specify how browsers should handle case, so using camelCase leaves one open to ambiguous interpretation.

Additionally, CSS uses hyphens internally for things like first-child.

Though the compatibility issues are generally a non-issue in modern browsers, that's how the standard came about, and I recommend sticking with it. You'd be fine if you were to deviate, but why bother?

Answer 6

"In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F"."