BEM methodology in CSS

BEM or Block, Element, Modifier is a popular and effective naming convention for classes in HTML and CSS. The main purpose of BEM is to provide developers more clarity, scalability, and easy reusability in code.

What is BEM style?

Classes named in context of BEM convention will look like below code snippet :

/* Block component or parent */
.link {}

/* Element or child item */
.link__primary {}
.link__secondary {}

/* Modifiers that style the block */
.link--active {}
.link--color {}
.link-bg-green {}

The block component .link is like a parent element. All of the child elements of this block should have a name like .link__primary, notice the two underscores followed by block name. Now, modifiers style the block element and they are written like .link--active, these modifiers are named by putting two hyphens after the block element.

The above code is easily readable to other developers, they can easily tell which classes are doing what. In simpler words, BEM gives everyone in the team easy accessibility as the syntax is very declarative, the team members don't need to scratch their heads to know which components are doing what. One main problem that BEM resolves is the fear of changing CSS code, yeah you heard it right. One change in bad codebase can crash the entire component because CSS just goes level by level, it doesn't have a good nature. So it is better to prepare for the chaos and BEM is an antidote to this chaos.

More reasons to consider BEM

• You will have more confidence in your styling because it doesn't break easily and this is a good factor to look upon.
• Everything is a class and nothing is nested.

This makes CSS specificity very very low, so you don't have to worry too much about specificity while styling.

• The scalability of the codebase will increase because it can be easily modified and maintained in the future. Also, the reliability of code and trust of the team members improves a lot if the interface is maintainable. This is a good point for beginners.
• BEM naming conventions are customizable until you don't kill the core idea behind it. You can give it your own flair but other developers should find it easy to read.
• BEM is modular in nature, you can easily use previous block styles in a new project. This feature can save a lot of your time.

Wrapping up

It is fair to say that BEM solves a lot of our problems and is a good habit to have as a developer. There are also other methodologies like OOCSS, SMACSS, SUITCSS. Every one of these has its own advantages and limitations including BEM, feel free to check them out. In the end, it depends on the developer's preference but one should not compromise on the maintainability of code.

That's it from me, I hope it helps someone who is new to CSS or someone who is afraid of writing CSS. Tell me your thoughts in the comments!