BEM — block, element, modifier.
As a young developer in the game of frontend web development, I have always been looking for newer ways to make beautiful websites. As we all know with the JavaScript big boom, most people are forgetting the fundamentals. As I told some of my mentees, everything in frontend web is just HTML, CSS and js. Know this and you are ready to take the world by STORM.
Then one day, I was asked what approach was I taking towards writing my CSS. It got me wondering are there actually approach to writing CSS, so I did a little research and came across some few once
- OOCSS — Object Oriented CSS
- ACSS — Atomic CSS
- oCSS — organic cascade style sheet
- SMACSS — Scalable and Modular Architecture for CSS
- BEM — Block, Element, Modifier
- SUITCSS — Style tools for UI components
There might still be more, these are the few I came across in my research 😜. All this ain’t really special but there are very useful. There are mainly naming convention for CSS. So for this article, I will be talking about BEM.
What’s BEM?
BEM — block, element, modifier
BEM (which stands for Block-Element-Modifier) is a naming convention standard for CSS class names. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale.
BY NATHAN RAMBECK — BEM by example
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project.
By Robin Rendle — BEM 101
I must say these have pretty much explained it all. So basically BEM is just a naming convention standard for CSS class name. it is used to aid readability, understandable code to all and reusability.
Block is said to be a component of a website or app. There are Nav, Header, Button, Input and the likes.
/* Block component */.nav {}
Element is a sub-component i.e. they are part of a component. Elements can not exist without a Block as there are placed inside of it. In BEM, Elements are denoted with a double underscore _ _.
/* Element that depends upon the block */.nav__item {}
Modifiers, on the other hand, are used to manipulate or style a particular block or component without affecting other completely unrelated blocks. They are denoted with a double dash — .
/* Modifier that changes the style of the block */.nav--light {}
putting all this together we can have something like
<nav class="nav nav--light">
<a href="/" class="nav__item">home</a>
<a href="/about" class="nav__item">about</a>
</nav>now the big question that came to my mind when researching was
Why should I use BEM?
To me writing class dynamically or randomly was working for me so why should I use it ?.
Well, I discovered that BEM isn't fully utilized in small projects but they are life saves for large ones. But the question still is not answered. So, I draw out the following conclusion from my research.
Modularity
BEM makes your CSS free from the hell of cascading. As Blocks are styled to not be dependent on other elements of the page.
Reusability
It also promotes reuse of CSS classes since these classes were built based on Blocks and have modifiers to customize them. so it reduces the amount of CSS code that you will have to maintain and with a set of style guidelines in place, you can build a library of blocks, making your CSS super effective especially with a design system in place.
Structure
It gives your CSS code a solid structure that remains simple and easy to understand. It also communicates function and purpose.
Problems of BEM
- Never overriding modifiers in an unrelated block.
- Avoiding making unnecessary parent elements when the child can exist quite happily by itself.
Vindicate
For my next big project, I guess I will give BEM a chance. It feels like the one step closer to making beautiful websites. So be part of the movement today and BEM that CSS.
