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
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 –
@ symbol needs to be escaped in the CSS like so