Naming things are always difficult in the programming world, and in CSS.
Some developers don’t pay that much attention to naming. They claim that there isn’t enough time on thinking about which name to give each class. That may be right, but in the long-run low-quality code consumes much more time.
So there are different approaches to solve the naming problem, and one of them is called Block-Element-Modifier (BEM). In this article, we will have a closer look at what BEM is and how to structure your CSS code with BEM.
BEM stands for Block, Element, and Modifier. It’s a CSS naming convention for writing cleaner and more readable CSS classes.
BEM also aims to write independent CSS blocks in order to reuse them later in your project.
Before we jump into details, you can see below an example of how BEM class namings are:
// Blocks are named as standard CSS classes
.block {}// Elements declared with 2 underscores, after block
.block__element {}// Modifiers declared with 2 dashes, after block or after element
.block--modifier {}// element and modifier together
.block__element--modifier {}
Blocks are independent, reusable and usually bigger components of a webpage. They can have modifiers and contain elements.
We can count bigger parts in a webpage like <header>, <nav>, <section>, <form>, <article>, <footer> as block examples.
For example, Youtube’s Header Navigation can be used as a block, and can be declared as:
<header class="youtube-header"></header><style>.youtube-header {
// Rules
}
</style>
Elements are children of blocks. An element can only have 1 parent Block, and can’t be used independently outside of that block.
The naming of an element must start with its parent Block name, 2 underscores after it, and end with its own name:
<header class="youtube-header"> <img class="youtube-header__logo"/> <div class="youtube-header__search"></div> <ul class="youtube-header__list"> <li class="youtube-header__item></li> <li class="youtube-header__item></li>
</ul></header>
In HTML Structure, an element can contain another element, but can’t be written in BEM like this:
.youtube-header__list {
// rules
}.youtube-header__list__item {
// rules
}// There is no such a thing as block__element__element
Since youtube-header is the block, the naming convention of its elements can be written like this:
.youtube-header__logo {
// rules
}.youtube-header__search {
// rules
}.youtube-header__list {
// rules
}.youtube-header__item {
// rules
}
or the Sass version:
.youtube-header {
// rules
&__logo {
// rules
} &__search {
// rules
} &__list {
// rules
} &__item {
// rules
}
}
In Sass, & takes the place of the parent’s name.
If you don’t know Sass, you can check my article about Sass here.
Modifiers represent different states or styles of classes. They can be used both for blocks or elements.
In HTML a modifier must be used together with its Block / Element, as additional features:
<form class="form form--large"> <button class="form__button form__button--red"></button>
</form>
The naming of a modifier must start with its parent Block name, 2 dashes after it, and end with its own name.
Block — Modifier:
.form {
// rules .form--large {} // Block modifiers
.form--small {}
}
Element — Modifier:
.form {
// rules
.form__button {
// rules .form__button--red {} // Block Element Modifiers
.form__button--green {}
}
}
We will probably have an HTML structure like this:
<header>
<nav>
<ul>
<li>
<a>Some link</a>
</li>
</ul>
</nav>
</header>Since we can’t name element inside another element, I would use the header as a container, <nav> as the block and the rest just as elements:
.container { }.navigation {
// rules
&__menu { } &__item { }&__link { }
}
and the HTML structure would be:
<header class="container"> <nav class="navigation"> <ul class="navigation__menu">
<li class="navigation__item">
<a class="navigation__link">Some link</a>
</li>
</ul>
</nav>
</header>
You can read more about the solutions to some common problems of BEM here.
BEM brings just another approach to writing cleaner and maintainable CSS. However, there are also some arguments against BEM that using it is not that useful.
Well using BEM or not is up to you, your team and maybe depends on the project. What do you think? Would you prefer using BEM?
If you want to learn more about Web Development, feel free to follow me on Youtube!
Thank you for your time & support!
