block__element Naming

One block name, element names with __, optional modifiers. Useful — not the same as strict BEM.

A small card

Studio notes

A short status card using one naming convention end to end.

Avoid chains like card__actions__button. Prefer card__button.

Important HTML

<article class="card card--featured">
  <img class="card__media" …>
  <h2 class="card__title">…</h2>
  <p class="card__lede">…</p>
  <div class="card__actions">
    <button class="card__button" type="button">Open</button>
  </div>
</article>