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