EN RU
Forum

Methodology

Technology

Toolbox

Libraries

Tutorials

JavaScript with BEM

In the BEM methodology, JavaScript is used for making a webpage “come alive” and is considered one of the block implementation technologies.

BEM enforces additional rules on JavaScript that help to apply all the concepts of the component approach of the BEM methodology.

Basic principles of the component approach in JavaScript for BEM

JavaScript is one of the block implementation technologies, so the main concepts of the BEM methodology can be observed when working with JavaScript:

Unified subject domain

In web development, the final product (such as a webpage) consists of different technologies (HTML, CSS, JS, and so on). In BEM, working with all these technologies uses the same terminology and implementation approaches. This means that the entire team of a BEM project gets a unified language for communication, operating in terms of blocks, elements, and modifiers.

So the JavaScript implementation of blocks doesn’t use the concepts of DOM elements, but uses the next level of abstraction — the BEM tree. The advantage to this is we don’t rely on classes, and can independently describe the behavior of blocks and their optional elements. In JavaScript, modifiers are used for expressing the logic of a block or element (similar to CSS, where modifiers are used for defining appearance). The behavior of blocks and elements is described in JavaScript as a set of states.

Using the same concepts in all the technologies means we can implement various helpers in JavaScript for working with components and avoid hard coding the names of blocks and separators. This approach allows us to, for example, find all the elements with a particular name within the scope of a block, set a modifier for them, and check its value.

Example

Let’s take the example of a popup window (popup). There are several ways to show a popup window:

Important! Examples written for the BEM methodology use pseudocode. Real implementation examples are provided in the documentation for i-bem.js .

Using a unified subject domain makes it possible to interact with components at a higher level.

Working with modifiers

Modifiers can set specific states for blocks. The block logic is implemented in JavaScript and described using states. A block can be switched to another state by setting or removing a modifier. The change to the modifier creates an event that can be used for working with the block.

For example, to select a checkbox, you need to set the checked modifier to true for the checkbox block.

In a BEM project, you can’t change the states in runtime by using modifiers and directly changing the CSS class on the corresponding DOM node. For the JavaScript to work correctly, all actions with modifiers must be performed using helper methods.

For implementation examples, see the documentation for i-bem.js.

Response to changes in modifiers

Switching a block from one state to another often causes changes in its appearance. If the CSS uses a modifier to define the block’s appearance, changing the block state called by the same modifier will automatically apply all the necessary styles.

In BEM, the response to setting or removing a modifier is described declaratively. So, for example, if an additional class (or modifier) appears in the CSS during execution, all of this modifier’s properties are automatically applied to the DOM node of this class. The same thing occurs in JavaScript: if a modifier appears (a new class is added to the DOM node), the entire functionality of this modifier is applied. If the modifier disappears, the functionality is disabled.

To dynamically change the states of blocks and elements, we use special methods for setting and removing modifiers.

For implementation examples, see the documentation for i-bem.js .

Example

Let’s look at a form for sending a message. The following condition should be met: if an invalid email is entered, the Send button (the button block) is inactive (it gets the button_disabled modifier).

We could hard code all the conditions and continuously check it. This approach is inconvenient because any change will require manual changes to the code.

We could declare the block behavior and get the ability to override each modifier separately on a new redefinition level. The declaration can specify which block or element should respond to modifier changes.

block('button').onSetMod({
    focused: {
        true: this.onFocus,
        '': this.onBlur
    }
});

This approach allows us to:

Dividing the code into parts

We can apply the main BEM principles for organizing and storing code to JavaScript:

Example

Let’s look at an example of a logo (the logo block) implemented in two technologies: a template and styles.

HTML implementation of the block:

<a class="logo" href="/"> Your awesome company</a>

CSS implementation of the block:

.logo {
    width: 150px;
    height: 100px;
}

The logo block in the project’s file structure:

logo/
    logo.css   # Block's appearance
    logo.tmpl  # Templates for generating the block’s HTML representation

Adding JavaScript functionality to the logo block: now clicking the logo causes an action. According to the BEM methodology, the new behavior of the logo block will be implemented like this:

JavaScript implementation of the block:

document.querySelector('.logo').addEventListener('click', doSomething, false);

The logo.js file in the block’s file structure:

logo/
    logo.css   # Block’s appearance
    logo.tmpl  # Templates for generating the block’s HTML representation
    logo.js    # Dynamic behavior of the block in the browser

Dividing the code into parts and strictly organizing the project’s file structure not only make it easier to navigate the project and reuse or migrate components, but also allow us to work with redefinition levels for JavaScript and use assembly.

Working with redefinition levels

The documentation for the BEM methodology provides many examples where the final CSS implementation of a block is assembled from different redefinition levels. Applying BEM principles to JavaScript allows us to similarly divide a block’s behavior into different levels:

Use redefinition levels to create a generic JavaScript library of blocks and change it at the project level. Then use assembly and only include the necessary block behaviors in the project.

Example

Let’s return to the example of a form for sending a message:

block('button').onSetMod({
    focused: {
        true: this.onFocus,
        '': this.onBlur
    }
});

BEM style allows us to:

You can use a specialized framework for working with redefinition levels in BEM, such as i-bem.js, since it was created to meet BEM requirements.

How to switch to BEM-style JavaScript

The fastest way is to start applying the principles of the BEM methodology in your project and get your first results without using a specialized framework.

To immediately use all the BEM concepts in your project, you need to:

JavaScript implementation using the BEM methodology

Declarative style

Declarative JavaScript in a BEM project is shown by the following:

More information about applying redefinition levels in JavaScript

OOP principles in JavaScript for BEM

In the BEM methodology, the basic principles of object-oriented programming (OOP) are applied to JavaScript.

Encapsulation

In BEM, the JavaScript implementation of one block is separated from another block. Each block provides an API for interacting with other blocks.

The block declaration allows it to hide its internal implementation. Since elements are always an internal implementation of a block, they can be accessed only through the block’s API.

Inheritance

The declarative description of block behavior makes it possible to use the methods of a base block inside a derivative block and inherit them. The new block can get all the properties and methods of the base block.

You can also create inheritance chains, meaning that a block inherits from another one that, in turn, inherits from a third block, and so on.

For implementation examples, see the documentation for i-bem.js.

DOM representation of dynamic blocks

Blocks with JavaScript implementation can correspond to nodes in HTML. We refer to this as the blocks having a DOM representation.

In the simplest case, a block has a one-to-one relationship with a DOM node. However, a DOM node and a block are not always equivalent. You can put multiple blocks on the same DOM node (this is called a mix), or implement a single block on multiple DOM nodes.

There are also blocks without DOM representation. In JavaScript, they are presented as objects with their own methods.

For implementation examples, see the documentation for i-bem.js.

Interaction between blocks

The BEM methodology involves working with independent blocks. But in practice, blocks can’t be completely independent of each other.

Blocks can interact with each other using:

For implementation examples, see the documentation for i-bem.js.

The BEM methodology recommends arranging interaction between the blocks hierarchically according to their location in the DOM tree. A nested block shouldn’t know anything about the parent block, since this would violate the principle of independent components.

Interaction of a block with its elements

An element is the internal implementation of a block. In the BEM methodology, a block normally has additional helpers for working with its elements. It is not possible to access an element of another block directly. An element can be accessed only through the API of the block that this element belongs to.