BEM | Notion

BEM (Block Element Modifier) is a popular naming convention for CSS classes.

Here’s an example of what a CSS developer writing in the BEM style might write:

<body>
  <div class="card card--popular">
    <header class="card__header">
      <span class="card__price"> </span>
    </header>
    <div class="card__body">
      <!-- we need use `btn` somewhere else -->
      <button class="btn"></button>
    </div>
  </div>
</body>