The Block, Element, Modifier methodology aka BEM

BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. The goal is to help developers better understand the relationship between the HTML and CSS in a given project.

The Block: In HTML, blocks are represented by the class attribute. It describes its purpose (“What is it?” — menu or button), not its state.

<div class="success"></div>

The Element: A composite part of a block that can’t be used separately from it. It describes its purpose (“What is it?” — item, text, etc.), not its state. The structure of an element’s full name is block-name__element-name.

<div class="success">
<button class="success_button">OK</button>
</div>

The Modifier: An entity that defines the appearance, state, or behavior of a block or element. The modifier name describes its appearance, its state, and its behavior. The modifier name is separated from the block or element name by a single underscore (_).

<div class="success success_disabled">
<button class="success_button success_button_disabled">OK</button>
</div>

Find a code pen where I created a button style using BEM, BEM and CSS var property here

You can read more about it here: http://getbem.com, https://en.bem.info/methodology/quick-start, https://medium.com/buildit/a-tale-of-two-buttons-e63185aefd5f and https://blog.elpassion.com/reasons-to-use-bem-a88738317753

Happy Reading!

A <>er

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store