Notes about BEM (Block Element Modifier)
In the coming weeks, months and years, I will be working on frontend-development as part of my dayjob. These are some personal notes I took during my research about the BEM methodology. If you want to read the official introduction, you should visit their website.
Overview - What is BEM?
BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development. It aims to group css-classes in a meaningful way, making it easier to understand
- where this class is used
- what it describes and
- what state the element is in.
The BEM-notation is divided into three main parts: Blocks, Elements and Modifiers.
Blocks
A standalone entity that is meaningful on its own. Some examples might be headers, containers, menus, inputs, checkboxes, etc.
Elements
A part of a block that has no standalone meaning and is semantically tied to its block. This could be a menu item or an input placeholder.
Modifiers
A flag on a block or an element. Used to change appearance or behavior. This might be disabled, checked, fixed, big, etc.
Putting it together
A block itself is referenced though its name.
.button {
}
To reference elements inside of the block, you add it to the block element with two underscores (__):
.button {
}
.button__text {
}
If you want to add a modifier to a block or an element, you separate it with two dashes (--):
.button {
}
.button--disabled {
}
.button__text--inverted {
}
Benefits of BEM
Modularity: Block styles never depend on one another. They can easily be moved to other parts of the app.
Reusability: Composing styles in a meaningful way reduces the amount of code duplication.
Structure: BEM gives your code a solid structure that is both easy to understand and to expand.
References
This is post 009 of #100DaysToOffload.