The Basics of BEM Construction | Unleashed Technologies
Loading...

What is BEM?

The Basics of BEM Construction BEM stands for Block, Element, Modifier and is a popular semantic method to create naming classes for your HTML DOM objects. It takes some of the work out of selecting appropriate classnames (one of the most difficult tasks a developer faces).BEM is a modular-component-based approach to building websites. It allows for fast, scalable architecture, as well as an easier understanding of what an objects place, purpose and style is in the layout.

Why use BEM?

In addition to taking the burden off a project developer to create a set of clear and scalable classnames for layout construction and styling, BEM also helps produce cleaner code by reducing dependency on parent blocks in the CSS.

How to Write in the BEM Style

The basics of BEM construction are that the layout is constructed of Blocks (containers), Elements (smaller child objects of a container like a CTA button or an image) and Modifiers (a class that describes a variant of an element like a smaller version of a button). The rules that govern the construction of these classnames is that:

The block uses a classname to describe the complete object pattern. For example, a block containing a carousel of Home Page Banners could be name home-page-banners.

The element uses a variation of the parent blocks class with a double underscore to separate the parent class and the element description. If a banner in the DOM had some title content that was nested inside the banner container, you could define it with the class home-page-banners__title.

And if there were varied sizes or colors of that title, you could modify the element class using double dashes with an extra description. A modifier needs to include the full element class as well as the modifier, so the full output looks like home-page-banners__title home-page-banners__title--red.

The full construction of the DOM object could look like this:

<div class="home-page-slider">
    <span class="home-page-slider__title home-page-slider__title--red">The Title</span>
</div>

Using BEM

By using this methodology, we can write better formatting code around some common frameworks and systems of modern web development. Let’s look at developing a WordPress site using a SASS pre-processor (a fairly common type of initiative) to put these concepts into practice.

A common parent container class for an article is entry-content and the article HTML markup looks like this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
    </header><!-- .entry-header -->
    <div class="entry-content">
        Displays the content
    </div><!-- .entry-content -->
</article><!-- #post-## -->

If we wanted to add an entry content sidebar with some extra information we could do this:

    <div class="entry-content">
        Displays the content
        <div class="entry-content__sidebar">
            Displays some sidebar content
        </div>
    </div><!-- .entry-content -->

And if we had some more custom variations of this sidebar we could add as modifiers:

    <div class="entry-content">
        Displays the content
        <div class="entry-content__sidebar entry-content__sidebar--reverse-colors entry-content__sidebar--bordered">
            Displays some sidebar content
        </div>
    </div><!-- .entry-content -->

By formatting the layout this way, we have also removed the dependency on parent objects to define styles in the CSS. For example, there is no need to nest elements under the .entry-content class because the child elements will not overlap with other classes if they are all following this method. The resulting CSS looks like this:

.entry-content { width: 100%; margin: 0 auto; }
.entry-content__sidebar { float: right; background-color: black; color: white; }
.entry-content__sidebar--reverse-colors { background-color: white; color: black; }

Even better is when you use SASS and can use the nested formatting markup:

.entry-content {
    width: 100%;
    margin: 0 auto;

    &__sidebar {
        float: right;
        background-color: black;
        color: white;
        
        &--reverse-colors {
            background-color: white;
            color: black;
        }
    }
}

This example will compile to the same CSS output as the example listed above. Remember that CSS reads from top to bottom so you will need to keep your override modifiers below the original element and parent properties.

Mixing Elements: You’re Doing It Right!

BEM can also help you sort out what properties a block object can have that belong to its place within a parent block container, as well as which elements or styles are for the named block itself. For example, a <div class="header"> container might have multiple child blocks that have position styles. Semantically these properties are elements of the header, and should be named accordingly using a double underscore name.

For example, a search bar that needs to be floated right in the header would be named <div class="header__search">. At the same time, that element is reused on a sidebar on other pages in the site; therefore, it needs to retain its own independent set of styles as to not override properties that only pertain to another parent’s position. The goal is to avoid using the parent’s class as a specific CSS parent while also avoiding the need to override styles that are specific to a certain instance of the block. In order to avoid this, we will set our search form styles using a more global generic class (i.e. search-form') and use the header element name to define placement in that containing block. The result would be:

<div class="header">
    <div class="search-form header__search-form">Search Form</div>
</div>

As a result, the CSS (SASS) could retain a clean set of properties:

.header {

    &__search-form {
        float: right;
    }
}

.search-form {
    border: 1px solid black;
    margin: 0 auto;
}

This outputs to:

.header__search-form { float: right; }
.search-form { border: 1px solid black; margin: 0 auto; }

Both search forms use the global styles to govern border and centering properties; however, the form will be positioned to the right with a float in the header container.

Recap

Check out the BEM methodology for more information and to learn how to incorporate the convention into your own development process. Additionally, BEM can be used to improve JavaScript, system File Structures and more in a scalable, efficient way that will improve your process while making it more enjoyable.