Menu
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.
937
Using Title CSS, you'd do the following: For any global CSS class, use a capitalized name (title case). For any modifier or descendant class, use a lowercase letter for the beginning of th name.
__ represents the element and -- represents the modifier.
Naming rulesNames are written in lowercase Latin letters. Words are separated by a hyphen ( - ). The block name defines the namespace for its elements and modifiers. The element name is separated from the block name by a double underscore ( __ ).
In CSS, one can use underscore(_) instead of hyphen(-) for CSS selectors(class, id, span, …), but preference is given based on its ease to use. Underscores require hitting the Shift key and are therefore harder to type.
The general thought is to use hyphens. There are, in fact, potential compatibility issues with other options.
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?
193
.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
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
