πŸ”– ABEM: A more useful adaptation ofΒ BEM (archive)

ABEM brings BEM and Atomic Design together by adding some variations to the BEM convention:

  • Prefix blocks with a-, m- or o- to signify its level.
  • Allow block names to be camelCase, changing .o-subscribe-form__field-item to .o-subscribeForm__fieldItem. This makes grouping of the class names easier and our brains can parse the shapes faster.
  • Use selectors that have multiple classes, especially for modifiers.
  • Modifier classes should have a - prefix.

For example:

.m-signUpForm--isOpen { display: block }
/* ... would become... */
.m-signUpForm.-isOpen { display: block }

This makes the HTML easier to read too:

<section class="m-signUpForm m-signUpForm--isOpen"></section>
<!-- ...would become... -->
<section class="m-signUpForm -isOpen"></section>

Applying modifiers like this has its drawbacks since it applies to all child elements too. The article goes into detail on how to resolve this.

πŸ”– 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.

πŸ”– MindBEMding – getting your head ’round BEM syntax (archive)

BEM class names are meant to be descriptive of their place, relationships and states.

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

In the above example it is important to note the order of --modifiers and __elements:

  • A person has an element hand with the modifier for which side.
  • A person has a modifier for gender that has the element hand.

Good BEM naming requires us to understand which category something falls into. Just because a something lives inside a block doesn’t always mean that it is an element. It could be a block in its own right. For example, something like a site logo on the header could be .header__logo, but if you are going to reuse the logo in the footer too you could separate it out into its own block .site-logo.

πŸ”– More Transparent UI Code with Namespace (archive)

CSS code should be transparent and self-documenting. Naming conventions like BEM help us see how components and its elements relate to each other. Namespaces give us a more global sense of the classes, in a non-relative way. Using namespaces gives us:

  • Clarity of what a class does and its scope
  • Confidence to know what changes will have side effects

These are the suggested namespaces:

  • o- for objects that are used a wide variety of contexts
  • c- for components which are a distinct part of the design
  • u- for utilities that are often used along side other classes
  • t- for themes (if your app has them)
  • s- for scopes that contain content coming from elsewhere (like a CMS)
  • is- or has- for states
  • _ for ugly hacks
  • js- for any DOM that has a JavaScript behavior on it
  • qa- for running automated tests or other test engineering requirements

BEM is a CSS naming convention where everything is a class and nothing is nested.

Block is a top level abstraction of a component.

.btn {}

Elements inside the block are denoted by two underscores. These shouldn’t exist outside of blocks.

.btn__price {}
.btn__text {}

Modifiers manipulate the block to add states, themes and styles. This is denoted by two dashes.

.btn--orange {}
.btn--big {}

While this makes the markup a bit verbose you get the advantage of understanding the CSS and component structure by looking at the HTML:

<a class="btn btn--big btn--orange" href="https://css-tricks.com">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>

πŸ”– BEM 101 | CSS Tricks