I keep getting tripped up at work by forgetting to write modular CSS classes. There are so many benefits to a robust CSS architecture that I really want to get it right. BEM is a methodology to achieve this.
Block is a component or feature than can stand alone and is not dependent on any other code. It can be re-used anywhere. Next, an
Element. This is always part of a
Block and has no meaning on its own. Lastly, there is the
Modifier. This changes the behaviour and/or appearance of a
.button is a block.
.button__label is an element.
.button--confirm is a modifier.