On my recent quest of finding out optimized solutions to increase the
development speed, I came across a solution to one of the biggest
problems faced by almost every developers which is giving class names to the html elements.
We often overcomplicate the class names without having any logic behind
it and later find it very hard to understand which class names contains
which style. This wastes a lot of time and energy which could be easily
saved using BEM naming conventions.

It will not only make your development speed faster but it will make
your code clean and scalable at the same time. So, without much
further ado let's see some basics about BEM naming conventions and don't
worry it won't be long.

To start the naming convention you will have to give separate names for your parent elements like

Now, for each block/child element the name should consist of the parent class name + two under scores + the content of the block. Like you are trying to write the heading section under the parent element then we can write it as

Then comes the state of each element. For example you want to disable
a button for the user untill the user sign up in your website. So, for
naming these modifiers you will write the element name + two hyphens + the state of the element

You might be thinking that these names will take longer time to write
and it will decrease the speed of development. Well yes, initially it
will take more time as compared to only give classnames with single
letters like a or b. But in the long run you will realize the true power
of BEM because just by reading the HTML content you will be able to
figure out which element to modify and which to not.

But BEM itself is not so powerful. I also think that using BEM in a
small scale project is a drag and completely useless. But using Sass converts BEM from a hero to a super hero. Using the combination of these two will make your life as easy as ABC.

I will write about how to use both these together in my next blog.
So, stay tuned for that. For now, focus on BEM and feel free to ask me
anything that you want to know.