Developer News, More

BEM CSS methodology in HTML and CSS


BEM stands for Block Element Modifier. It is a name of methodology for web development that makes better understanding and relationship between HTML and CSS. BEM was created by Yandex. 

BEM CSS methodology in HTML and CSS

The purposes of BEM creation are as follows:

  1. To make fast development projects and make long lasting results from the projects
  2. To run large projects involving many people
  3. To reuse codes in the projects
  4. To make any projects scalable so that adding new people in the project does not make the development process slower.

In BEM methodology, block is considered as the top level construct of a component. Block is the parent of this newly created component. Element or elements are child of block and these are placed inside the block. And modifiers are used to style blocks. Modifiers are used in such a specific way that it never makes any change in styles of any other modules or components in a project.

BEM css methodology can be understood more easily by analyzing the following example of css selectors:

For a group of social share buttons, the BEM methodology would be like below




In the above example, .btn is the parent and roles as block. Then .btn__text is the children of the block. So it is element and written by two underscores following the block name. The modifier of the above example is .btn—orange which manipulates the styles of btn block. Modifier of BEM is written by appending a double hypens to the block name.

What should be the markup if we consider the above example. Okay here we go:

Any development project including small to large could be run smoothly using bem css methodology. Whoever makes the markup development projects. Thus adding new people in development project will not affect the speed of the project development.

So here are some points of how BEM methodology can make a project perfectly finished and long lasting unless any change.

Generally web development project involves a group of people.  Different members of this group do different parts of the project. One may involve in making the header of the website whereas another member may involve in making body part of the side and so on. If these people do not follow any specific rules or methodology of applying css, then there will be major possibility of generating garbage codes. Because one member of the group cannot know what css styles are being applied by other member of the group. So, they can apply same css styles for same elements.

If a team follows the BEM methodology, then every member of the group will know which class will be used for css styles. Thus they can apply css with no conflict with each other. Moreover, css codes can be reused in BEM methods.

However, BEM methodology has some drawbacks. One of the major drawbacks is the naming convention of classes. There are hyphens and underscores. Some developers don’t like to markup their html codes like this. Also according to css standard rules underscores in selectors are not good practices.

You Might Also Like

Leave a Reply