BEM is a CSS naming convention where everything is a class and nothing is nested.

Block is a top level abstraction of a component.

.btn {}

Elements inside the block are denoted by two underscores. These shouldn’t exist outside of blocks.

.btn__price {}
.btn__text {}

Modifiers manipulate the block to add states, themes and styles. This is denoted by two dashes.

.btn--orange {}
.btn--big {}

While this makes the markup a bit verbose you get the advantage of understanding the CSS and component structure by looking at the HTML:

<a class="btn btn--big btn--orange" href="https://css-tricks.com">
  <span class="btn__price">$9.99</span>
  <span class="btn__text">Subscribe</span>
</a>

πŸ”– BEM 101 | CSS Tricks

Leave a Reply

Your email address will not be published.