pineco.de/css-quick-tip-the-valid-characters-in-a-custom-css-selector/
CSS Quick Tip: The Valid Characters in a Custom CSS Selector - Pine
Using valid CSS selectors is easy, we initially know how to write one. We can't make mistakes selecting elements but what about the custom class or ID ones?
pineco.de
CSS Quick Tip: The Valid Characters in a Custom CSS Selector
- / _ :
There is one catch: the hyphen and underscore beginnings is reserved for the vendors, like -webkit-, -moz-, -o- or -ms-. You can use them, but it is bad practice.
we have two “special” character in this stack which is hyphen and underscores. I’m sure you know at least a little bit about BEM (Block Element Modifier) which is a particular naming technique using double hyphens and underscores to separate the components ordered. This concept shows us how we can achieve complex and manageable selector syntax just by the “basic” values. For more information about BEM check out the project page.
BEM — Block Element Modifier
BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
getbem.com
There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton
It is a known fact that the right styleguide can significantly increase development speed, debugging, and the implementation of new features in legacy code. Sadly, most CSS codebases are sometimes developed without any structure or naming conventions. This leads to an unmaintainable CSS codebase in the long term.
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.
Block
Encapsulates a standalone entity that is meaningful on its own. While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy. Holistic entities without DOM representation (such as controllers or models) can be blocks as well.
- Use class name selector only
- No tag name or ids
- No dependency on other blocks/elements on a page
Element
Parts of a block and have no standalone meaning. Any element is semantically tied to its block.
- Use class name selector only
- No tag name or ids
- No dependency on other blocks/elements on a page
Modifier
Flags on blocks or elements. Use them to change appearance, behavior or state.
- Use modifier class name as selector: .block--hidden { }
- To alter elements based on a block-level modifier: .block--mod .block__elem { }
- Element modifier: .block__elem--mod { }
