Understanding BEM Methodology

When working on small websites, organizing styles isn’t a major concern. You create your files, write the necessary CSS, and you’re good to go. However, for larger, more intricate projects, code organization becomes essential, especially when collaborating with a team of front-end and back-end developers.

Today, numerous methodologies aim to streamline CSS code and enhance its maintainability. This article delves into one such methodology: BEM. BEM, which stands for Block Element Modifier, focuses on accelerating the development process and simplifying teamwork by structuring CSS classes into independent modules. If you’ve ever encountered a class name like header__form--search, you’ve seen BEM in action. While these class names might seem lengthy, they prioritize readability and clarity.

It’s recommended to use BEM exclusively with classes, not IDs. This is because classes permit name repetition if needed, fostering a more consistent coding structure. When structuring your website into organized modules, a consistent structure of block, element, and modifier should be followed. Each block can house multiple elements, and both blocks and elements can have multiple modifiers. Let’s break down the fundamental BEM structure with illustrative examples.

Block

In the context of your website, a block represents an object—a larger structural unit of your code. Common examples of blocks include headers, content sections, sidebars, footers, and search components. In BEM, blocks serve as the foundation for chaining CSS classes.

Consider these block examples:

• a content section
• a menu
• a search form

1
2
3

.content {/* Styles */}
.menu {/* Styles */}
.search {/* Styles */}

Element

An element is a constituent of a block, responsible for a specific function. It holds significance solely within the context of its parent block:

• an article within the content section
• an item within the menu
• an input field within the search form

1
2
3

.content__article {/* Styles */}
.menu__item {/* Styles */}
.search__input {/* Styles */}

Modifier

Modifiers enable us to represent variations of a block. A prime example from Bootstrap would be button sizes. These sizes are essentially variations of the button itself, making them modifiers:

• a featured article within the content section
• a link within the menu
• a search field with or without an icon

1
2
3

.content__article--featured {/* Styles */}
.menu__item--link {/* Styles */}
.search__input--icon {/* Styles */}

Naming Conventions

At its core, BEM methodology aims to make CSS selector names as informative and self-explanatory as possible. The original BEM style adheres to these conventions:

Block names are typically single words like .header, but longer definitions are separated by a single hyphen -:

1

.lang-switcher {/* Styles */}

Element names begin with a double underscore __:

1

.lang-switcher__flag {/* Styles */}

Modifier names begin with a single underscore _:

1

.lang-switcher__flag_basic {/* Styles */}

A fundamental rule in BEM is that a modifier cannot exist independently of its owner.

Example:

1

.btn_big {/* Styles */}

The modifier btn_big can only be used if header is also defined.

Incorrect example:

1

<div class=”btn_big”>...</div>

Correct example:

1

<div class=”btn btn_big”>...</div>

Beyond the original BEM styles, alternative naming schemes like Harry Roberts and CamelCase styles exist.

Harry Roberts style example:

1

.block-name__element-name--modifier-name {/* Styles */}

CamelCase style example:

1

.BlockName__ElementName_ModifierName {/* Styles */}

While other options are available, these two are the most prevalent. The naming convention proposed by Harry Roberts is particularly well-regarded, adhering to these rules:

• Names are written in lowercase.
• Words within BEM entity names are separated by hyphens -.
• Element names are separated from block names by double underscores __.
• Boolean modifiers are delimited by double hyphens --.
• Key-value type modifiers are not used.

This convention excels in clearly distinguishing modifier elements. In the original convention:

1

.block__element_modifier {/* Styles */}

The distinction between single and double underscores is subtle. However, double hyphens provide clear separation:

1

.block__element--modifier {/* Styles */}

BEM Across Different Formats

Beyond CSS, BEM proves valuable for organizing JSON, XML, tree files, or any format that supports nesting. Consider BEM as a methodology for structuring your UI.

Let’s examine an HTML snippet structured using BEM:

1
2
3
4
5
6
7
8

<header class=”header”>
  <img class=”header__logo”>
  <form class=”header__search-from”>
    <input class=”header__search-from__input” type=”input”>
    <button class=”header__search-from__button” type=”button”>
  </form>
  <div class=”header__lang-switcher”></div>
</header>

The same structure can be replicated in JSON and XML formats.

XML:

1
2
3
4
5
6
7
8

<block:header>
  <block:logo/>
  <block:search-from>
    <block:input/>
    <block:button/>
  </block>
  <block:lang-switcher/>
</block>

JSON:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
  block: ‘header’,
  content: [
    { block: ‘logo’ },
    {
      block: ‘search-form’,
      content: [
        { block: ‘input’ },
        { block: ‘button’ }
      ]
    },
    { block: ‘lang-switcher’ }
  ]
}

File System Organization in a BEM Project

Proper file organization is crucial in BEM. Not only does BEM streamline CSS class organization and enhance their understandability, but it also promotes a highly maintainable file structure. Consider this example project using BEM file organization with SASS files:

1
2
3
4
5
6
7
8
9

blocks/
  input/
    __box/
      --big/
        input__box--big.scss
      input__box.scss
  button/
    --big/
      button--big.scss

The subfolder structure within the main folder provides a clear and organized overview. This makes it incredibly easy for anyone to follow the established pattern, regardless of who’s working on the project.

Adapting BEM Projects for Different Platforms

Beyond organizing files, BEM allows for more granular control. For instance, if you’re building a responsive web project where the client requires specific blocks to appear differently on mobile and desktop, dividing your BEM folder structure based on platforms is a good practice. Here’s an example of organizing buttons for different platforms:

1
2
3
4
5
6
7
8
9

common.blocks/
  button/
    button.scss
desktop.blocks/
  button/
    buttons.scss
mobile.blocks/
  button/
    button.scss

This is merely an example of how to structure an entire project using BEM. A strict BEM file tree isn’t mandatory; you can implement BEM selectively in specific project segments. It’s not always necessary to create separate files for every element and modifier. A common approach is to create a file structure for blocks, containing declarations for their elements and modifiers.

BEM in Action

Now that you’re familiar with naming conventions, let’s see BEM in practice. Consider this HTML code:

1
2
3
4

<a class=”btn btn--big btn--primary-color” href=”#” title=”Title”>
  <span class=”btn__price”>$3.99</span>
  <span class=”btn__text”>Product</span>
</a>

And its corresponding CSS:

1
2
3
4
5
6
7

.btn__price {/* Styles */}

.btn__text {/* Styles */}

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

.btn--primary-color {/* Styles */}

It’s important to note that not every instance requires a block, element, and modifier.

For example, let’s say we have a block named person. A person has legs and hands and can be either female or male. To define a male person with a right hand:

1

.person--male__hand--right {/* Styles */}

This illustrates BEM’s power. We define a person whose gender acts as a modifier. Regardless of gender, a person has a hand, which is an element. Each person can have a right or left hand, again represented as modifiers.

To define a general person with a single hand:

1

.person__hand {/* Styles */}

As you become more comfortable with BEM, structuring your CSS and HTML becomes intuitive.

BEM with CSS Preprocessors

CSS preprocessors have become indispensable tools, offering numerous advantages. They complement BEM methodology remarkably well.

Here’s a common example of BEM combined with SASS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.person {
  &__hand {/* Styles */}

  &__leg {/* Styles */}

  &--male {
    /* Styles */

    &__hand {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }

    &__leg {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }
  }

  &--female {
    /* Styles */

    &__hand {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }

    &__leg {
      /* Styles */

      &--left {/* Styles */}

      &--right {/* Styles */}
    }
  }
}

This SASS code compiles into the following CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

.person__hand {/* Styles */}

.person__leg {/* Styles */}

.person--male {/* Styles */}

.person--male__hand {/* Styles */}

.person--male__hand--left {/* Styles */}

.person--male__hand--right {/* Styles */}

.person--male__leg {/* Styles */}

.person--male__leg--left {/* Styles */}

.person--male__leg--right {/* Styles */}

.person--female {/* Styles */}

.person--female__hand {/* Styles */}

.person--female__hand--left {/* Styles */}

.person--female__hand--right {/* Styles */}

.person--female__leg {/* Styles */}

.person--female__leg--left {/* Styles */}

.person--female__leg--right {/* Styles */}

To further streamline your workflow, consider using handy SASS mixins for BEM:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/// Block Element
/// @param {String} $element - Element's name
@mixin element($element) {
    &__#{$element} {
        @content;
    }
}

/// Block Modifier
/// @param {String} $modifier - Modifier's name
@mixin modifier($modifier) {
    &--#{$modifier} {
        @content;
    }
}

These mixins can be used like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.person {
  @include element('hand') {/* Person hand */}

  @include element('leg') {/* Person leg */}

  @include modifier('male') {
    /* Person male */
    
    @include element('hand') {
      /* Person male hand */
      @include modifier('left') {
        /* Person male left hand */
      }
      @include modifier('right') {
        /* Person male right hand */
      }
    }
  }
}

Producing the following CSS output:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.person__hand {
  /* Person hand */
}

.person__leg {
  /* Person leg */
}

.person--male {
  /* Person male */
}

.person--male__hand {
  /* Person male hand */
}

.person--male__hand--left {
  /* Person male left hand */
}

.person--male__hand--right {
  /* Person male right hand */
}

While this example is extensive, it highlights BEM’s capabilities and its suitability for both small and large-scale projects.

Initiating Your BEM Project

As explained in the official BEM documentation, the most straightforward way to begin your BEM project is to utilize existing GIT repository. Use the Git clone command:

1

$ git clone https://github.com/bem/project-stub.git

Navigate to the newly created directory and install the dependencies:

1

$ npm install

This will install:

Build the project using ENB:

1

$ node_modules/.bin/enb make

Start the development server:

1

$ node_modules/.bin/enb server

You should see the following message:

1

Server started at 0.0.0.0:8080

The server is now operational. View the results at this address:

1

http://localhost:8080/desktop.bundles/index/index.html

You’ll notice several pre-created elements defined in the bemjson file located here:

1

project-stub/desktop.bundles/index/index.bemjson.js

This file generates the HTML displayed in your localhost’s index.html file. Let’s modify it to create our “Person” BEM project from the previous chapter. Replace the code in index.bemjson.js with this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

module.exports = {
    block: 'page',
    title: 'Person BEM',
    favicon : '/favicon.ico',
    head : [
        { elem : 'meta', attrs : { name : 'description', content : '' } },
        { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } },
        { elem : 'css', url : 'index.min.css' }
    ],
    scripts: [{ elem : 'js', url : 'index.min.js' }],
    content: [
        {
            block: 'person',
            content: [
                {
                    elem: 'male',
                    content: [
                        {
                            elem: 'leg',
                            mods: {side: 'left'},
                            content: 'Male person leg -- left'
                        },
                        {
                            elem: 'leg',
                            mods: {side: 'right'},
                            content: 'Male person leg -- right'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'left'},
                            content: 'Male person hand -- left'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'right'},
                            content: 'Male person hand -- right'
                        }
                    ]
                },
                {
                    elem: 'female',
                    content: [
                        {
                            elem: 'leg',
                            mods: {side: 'left'},
                            content: 'Female person leg -- left'
                        },
                        {
                            elem: 'leg',
                            mods: {side: 'right'},
                            content: 'Female person leg -- right'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'left'},
                            content: 'Female person hand -- left'
                        },
                        {
                            elem: 'hand',
                            mods: {side: 'right'},
                            content: 'Female person hand -- right'
                        }
                    ]
                },
            ]
        }
    ]
};

This will generate the following HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div class="person">
    <div class="person__male">
        <div class="person__leg person__leg_side_left">
          Male person leg -- left
        </div>

        <div class="person__leg person__leg_side_right">
          Male person leg -- right
        </div>

        <div class="person__hand person__hand_side_left">
          Male person hand -- left
        </div>

        <div class="person__hand person__hand_side_right">
          Male person hand -- right
        </div>
    </div>

    <div class="person__female">
        <div class="person__leg person__leg_side_left">
          Female person leg -- left
        </div>

        <div class="person__leg person__leg_side_right">
          Female person leg -- right
        </div>

        <div class="person__hand person__hand_side_left">
          Female person hand -- left
        </div>

        <div class="person__hand person__hand_side_right">
          Female person hand -- right
        </div>
    </div>
</div>

This example uses the default BEM coding scheme provided by the framework. Numerous other commands and options are available for tasks such as creating pages, blocks, or modifying BEM HTML. Refer to the official BEM documentation for further exploration.

Advantages and Considerations

Advantages

• Maintainability: BEM excels in maintainability. No more fearing code changes in large-scale projects. BEM provides clarity on element purposes and their block contexts.
• Logical and Intuitive Class Names: Every team member can easily understand the role of an element based on its class name. BEM fosters a shared, declarative syntax.
• Elimination of Nested CSS Selectors: Each HTML element has its dedicated CSS class, making its purpose evident from its name. One selector to rule them all.

Concerns and Common Mistakes

• Excessive Nesting: Limit nesting to a maximum of two levels (parent and child).
• Block Scope Definition: Choose block scopes carefully. Starting with a block that might later have a parent block can lead to nesting issues.
• Avoiding SASS @extend: To quote Harry Roberts:

You can create a greater number of combinations in the view by not ‘tying’ classes together in Sass. The HTML has a much better paper trail in that you can see every class acting on a piece of the DOM. Your CSS stays much slimmer in that you don’t have to create new placeholder classes (or the manifest classes that combine them) every time you want to create a new piece of UI.

Conclusion

Initial reactions to BEM’s long class names might involve skepticism. However, after trying it, many developers find it indispensable. BEM enhances code maintainability, and developers new to a BEM-based project can quickly grasp the code structure.

Despite its popularity, BEM still sparks debates. Some question the necessity of long class names over nested HTML elements. While BEM isn’t mandatory, it’s widely embraced by front-end developers for its practicality.