π BEMIT: Taking the BEM Naming Convention a Step Further (archive)
BEM only tells us about how classes relate to each other. They don’t provide an insight into the global non-relative meaning of the class. This is where namespaces based on ITCSS help.
Namespaces like o- for objects and c- for components should be added as a prefix to the normal BEM classes. Now by looking at class names β like o-card and c-user__photo β we are able to reason about its scope, where else we can use it, and how we can reuse or modify it.
Responsive classes should be added as suffixes with with an @. For example – u-hidden@print or o-layout@md. The @ symbol needs to be escaped in the CSS like so .u-hidden\@print.