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

<div class="parent"></div>

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

<div class="parent">
    <div class="parent__heading></div>
</div>

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

<div class="parent">
    <div class="parent__heading>
        <button class="parent__heading--disable"></button>
   </div>
</div>

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.

#2Articles1Week