UI Development

What is BEM..?

Introduction 

BEM could be a popular naming convention for classes in HTML and CSS. It makes your code scalable and reusable.

BEM stands for Block-Element-Modifier,  intimately as follows:

Block: The outermost parent element of the component.

Ex:  header, container, menu, checkbox, input

Element: Inside the component is also one or more children called elements,

Which is semantically tied to its block.

Ex: checkbox caption, list item, menu item, header title

Modifier: It’s the variation signified for a Block or an Element. We will also say as a flag on a block or element, use them to change appearance or behavior.

Ex: disabled, highlighted, checked, fixed, size, big, color red.

Naming convention between Block and Element 

Elements, is placed inside and these are denoted by two underscores (__) following the name of the block. 

[block]__[element] 

Adding Modifiers to Block 

Modifiers can manipulate the block so that will theme or style our current component without inflicting changes on a completely unrelated module. This is often done by appending two hyphens to the name of the block.

[block]__[element]–[modifier].

Key points while we add modifiers, such as:

  • Modifier can’t be used alone
  • It should change the looks, behavior.

BEM Tree 

It is an abstraction over a DOM tree which is representation of web content structure in terms of BEM entities (blocks, elements, and modifiers).

Example:

Let’s take sample code snippet for footer block:

The Above code structure can be represented as below tree structure: 

Any Drawbacks if we are not following BEM…? 

Yes, if we not following BEM and representing own naming convection there will be some drawbacks such as:

Not Maintainable, complex structure.

Let us take an example (Without BEM):

Here, elements inside footer have different class names which are independent with the parent class footer.

For example: To style nav-link,

If we write code directly for nav-link then it’ll impact all places wherever we use nav-link class globally.

In order to have styles only inside the footer for nav-link then we’ve got to follow the hierarchy from parent 

The above method isn’t good for maintainable and difficult to make changes for long term projects.

Now, let’s see same example using BEM :

 

The above structure having common class name “footer”, you can easily find the particular elements inside the footer.  

The above code snippet says that element belongs to footer class element.

No hierarchy needed and easy for developer to write the code and maintain.

Benefits 

There are three main benefits, such as:

  1. It communicates purpose or function
  1. It communicates component structure
  1. It sets a standardized low-level of specificity for styling selectors.

Other Benefits such as:

  • Modularity: Block styles are independent on other elements on a page, so we won’t experience cascading problems.
  • Reusability: As discussed above block styles are independent, by reusing them reduces amount of CSS code which we will maintain.
  • Structure: BEM gives us a solid structure which is straight forward to keep up and understand, simple.

Goal of BEM 

It is for most selectors to use just a one class name so that we should be able to quickly get a thought of which element depends on another (Developer friendly).

Conclusion 

I would highly recommend BEM if you’re not using it. You will learn quickly and reveal in the advantages on large and little projects. It helps you to stay your project in well-structured and also to avoid a number of the common mistakes made by most of our developers. 

About The Author