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

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?