BEM — The way you get maintainable CSS code
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. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.
Block
A functionally independent page component that can be reused. In HTML, blocks are represented by the
classattribute.
Features
The block name describes its purpose (“What is it?” — menu or button), not its state ("What does it look like?" — red or big).
Example
Don’ts
The block shouldn’t influence its environment, meaning you shouldn’t set the external geometry (margin) or positioning for the block.
You also shouldn’t use CSS tag or ID selectors when using BEM.
This ensures the necessary independence for reusing blocks or moving them from place to place.
__Element
A composite part of a block that can’t be used separately from it.
Features
The element name describes its purpose (“What is this?” — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).
The structure of an element’s full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).
Example
Don’ts
An element is always part of a block, not another element. This means that element names can’t define a hierarchy such as block__elem1__elem2.
— Modifier
An entity that defines the appearance, state, or behavior of a block or element.
Features
The modifier name describes its appearance (“What size?” or “Which theme?” and so on — size--s or theme--islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions--left-top).
The modifier name is separated from the block or element name by two midscores ( — ).
Examples
Don’ts
A modifier can’t be used alone! From the BEM perspective, a modifier can’t be used in isolation from the modified block or element. A modifier should change the appearance, behavior, or state of the entity, not replace it.
Example based on a car
For an example we build a car with BEM
First, we declare the car itself as a block
CSS
.car{}
HTML
<div class="car"></div>
Then we have to add windows, lights and the engine of the car. At this point its important to consider if its useful to declare the windows, lights and engine as an element or as a block, maybe you can also use them on a motorcycle?
For this example, we assume that those elements should not be reused.
We also would like to have the car in a black color so for the appereance we add a modifier to the block (.car — black).
CSS
HTML
So now we consider, that the wheels can also be used on a motorcycle
CSS
HTML
So as you can see we use a block (.wheel) inside a block (.car) to ensure that we can use the wheel at more than one place.
But the wheel at the Motorcycle appereance is not the same like from the car so we add a modifier which makes the wheel a little bit thinner
CSS
HTML
Maybe you don’t see the advantages first, but if you’re using this Methodology in practise, you will recognize how it will improve your CSS Code
