Tagatomic design

🔖 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.

🔖 Atomic Design (archive)

Atomic design is a strategy for creating design systems by breaking elements into distinct levels:

  • Atoms are the smallest building blocks, that is HTML elements (like inputs, buttons and headings)
  • Molecules combine atoms together to build something useful (like a form or a card)
  • Organisms combine molecules to create distinct sections of an interface (like the header or the product grid)

These are combined to make the actual designs in the form of:

  • Templates are organisms stitched together to form pages.
  • Pages are specific instances of templates.

This system allows you to design by assembling rather than deconstructing which means you don’t have to cherry pick patterns later.