Skip to main content

BEM

1 mins 📖 

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, Element and Modifier. A 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 Block or Element.

Example:

.button is a block.

.button__label is an element.

.button--confirm is a modifier.

See resources here and here.