Web Programming TutorialsBeginner's Guide to Block Element Modifier (BEM)

Beginner’s Guide to Block Element Modifier (BEM)

BEM stands for Block, Element, Modifier and is a popular naming convention used for classes in CSS and HTML. It is developed by a team of developers at Yandex with a pragmatic approach to help and understand the relationship between HTML and CSS in a specific project.

When you work on a website that has a limited number of web pages, it is easier to organize your CSS and HTML files. Once you start working on a bigger project or one that needs scaling in terms of adding more web pages in near future, or with working with a team of developers, the question does arise of what to pattern to follow to produce a consistent result. BEM is a methodology that is helpful in such crucial moments to make decisions faster. Organization of code in a web application is equally important to writing code, do take note of this. It is a philosophy that almost every modern day team of developers from different work backgrounds and experience of their own.
BEM must be used only with class names and not IDs or some other identifier. To understand what BEM is, let us take a look at each component that constructs it.

Components of BEM and their Naming Conventions

B for BLock

A block is an object that represents something on your website. This representation is usually a chunk of code that is built from different elements. For example, a header and a footer. Both may contain different HTML tags and CSS classes but each of them can be classified as a common block code. Another example would a sidebar, menu bar, or the main content area.

The use of BEM methodology is to make CSS selector names as informative and descriptive as possible such that when you visit your own at a later time or you are working in a team, an individual can identify them without any trouble. A Block name is always defined as a single word.

.header

If your source tends to have longer names, you can use a single hyphen to separate two words like this:

.navigation-side

E for Element

This component is defined within a block that adds a particular functionality to the web page. It cannot be used individually as it would not make any sense. For example, a title inside a header is an element that represents the main heading on a web page. The syntax for writing an element inside a block consists of two underscores.

.header__title {
}

M for Modifier

Modifier defines the appearance or the behaviour of an element inside the block or the complete block. They are similar to HTML attributes in nature. Their syntax is defined by appending the block name with two hyphens.

.header–big {
}

  • Summarizing the generic rules that we need to follow when naming our HTML classes and CSS selectors are:
  • The name must be written in lowercase.
  • The words within a name of BEM are separated by a hyphen -.
  • An element name is separated from a block name by a double underscore __.
  • The modifier name is separated from its own by two hyphens –.

An example of BEM

We just learned about the different components of BEM. To make it more clear, let us consider a clear example.

<!DOCTYPE html>
<html>
<body>
  <header class="header">
  <h1 class="header__title header__title--big">Some Title of a Web Page</h1>
  </header>
  <div>
    <section>First Section</section>
    <nav>Nav Bar</nav>
  </div>
  <footer>
    <p>Only Footer</p>
  </footer>
</body>
</html>

The CSS file of this HTML web page will be:

.header__title {
    background: #bbbbbb;
    padding: 10;
    margin: 10;
}

.header__title--big {
    fontsize: 48;
}

In the above example, we define a web page with blocks such as header, div (main content area) and the footer. The header contains a title defined using h1 HTML element for which we are using BEM to define styles in its CSS. The main content area contains two elements a section and a nav. They both are surrounded by a block element called div. Lastly, we define a footer with only one element.

Advantages of Using BEM

  • It self-documents CSS files.
  • It identifies the hierarchy of an element’s relationship and DOM.
  • Reduces naming collision among classes.
  • Enlights other developers more about what a piece of markup is doing from its name alone.
  • Major companies like Twitter and Google are using BEM.
  • Component styles are robust and highly portable from project to project. As a team you can use set your standards to work with different projects without any hassle.
  • It improves the quality of code and speed of development.

BEM and SASS

A common in practice and popular CSS pre-processor, SASS, supports BEM methodology. CSS preprocessors have a greater advantage when writing and maintaining a large code base. In the following example, you can see the most typical example of BEM in combination with SASS. The following CSS code:

.header__title {/* Styles */}

.header__subtitle {/* Styles */}

.header__title--big {/* Styles */}

.header__navigation-menu--left {/* Styles */}

.header__navigation-menu--right {/* Styles */}

Will be compiled from the following SASS:

.header {
  &__title {
    &--big
  }
  &__subtitle {}
  &__navigation-menu {
    &--left {}
    &--right
  }
}

From the above example, you can clearly observe that the nesting ability provided by a CSS preprocessor like SASS is not affected in any way by using BEM. Also, it removes writing the need for boilerplate code.

Conclusion

I think it is fair to say that the perfect use case of using BEM is a bigger and complex application. But increase the speed of development and ensure that you understand this methodology, you should try it first with a smaller project. This article showcases the practical advantage.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -