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