BEM Evolution

CUBI is a modern extension of BEM and Utility-first ideas.

C (Composition): Layouts and grids.
U (Utility): Small classes for margins and colors.
B (Block): Independent components.
I (Interaction/Exception): States (is-active, has-error).

Responsibility Separation Example:

<div class="l-grid u-mb-20"> <!-- Layout + Utility -->
  <article class="c-card is-featured"> <!-- Component + Interaction -->
     ...
  </article>
</div>

Note

Using prefixes (c- for components, u- for utilities) helps immediately understand from HTML code what each class is responsible for.