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

Leave a Reply

Your email address will not be published. Required fields are marked *