Using uppercase, dashes or underscores when naming css selectors [closed]

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?

Answer 2

.hyphens-for-multi-word-names .underscores_for_pseudo_namespacing 

Results in:

.grid-system_push-100  \_________/ \______/   namespace   object 

Namespace and object can easily be purposed for a sort of BEM implementation.

.grid-slot { }          /* block */  .grid-slot_size-100 { } /* block-specific modifier */  ._size-100              /* generic modifier */ 

My $0.02