Table of contents
Hola Friends, In this article we'll learn about BEM Methodology.
What is BEM ?
BEM divides the layout into 3 main parts: - Block - Element - Modifier
It's a CSS naming convention for writing cleaner and more readable CSS classes. BEM also aims to write independent CSS blocks to reuse them later in your project.
BEM is ideal for teams of developers on larger projects where designers and developers consistently name components for easier communication between the team members.
BEM syntax usually looks like this:
.block__element--modifier
Let's explore this in more detail:
Block
Encapsulates a standalone entity that is meaningful on its own. It is usually a bigger component of a webpage. for example header, card, div, etc.
<div class= "card">
. . .
</div>
Element
It is a part of a block and has no standalone meaning. Any element is semantically tied to its block. It is represented using [block-name](double underscore)[element-name] like card__header.
<div class= "card">
<div class= "card__header">
. . .
</div>
<div class= "card__body">
. . .
</div>
</div>
In the above example, card__header & card__body represents the Elements which resides inside the Block card.
Modifiers
It represents the flags on blocks or elements. Use them to change appearance, behavior, or state.
A modifier is an extension that specifies some change in the style of the block or the element it is applied to.
A modifier is indicated by using double dashes after the class name which allows you to overwrite the styles for a specific type of block, or an element.
<button class="btn btn--active"> Click Me </button>
<button class="btn btn--disabled"> Clicked </button>
In the above code snippet, btn--active & btn--disabled represents the Modifiers.
Corresponding CSS code would be:
.card { ... }
.card__header { ... }
.card__body { ... }
.btn { ... }
.btn--active { ... }
.btn--disabled { ... }
In case you are using some CSS preprocessor, you can modify your CSS file in the following way:
.card {
&__header { . . . }
&__body { . . . }
}
.btn {
&--active { . . . }
&--disabled { . . . }
}
BEM makes our CSS easier to read, helps to write clean code, and also saves a lot of time to decide the class name.
References
Wrap Up!!
Thank you for your time!! Let's connect to learn and grow together.
