EN
Forum

Methodology

Technology

Libraries

Tutorials

Toolbox

Overview

The BEM methodology and JavaScript

In the BEM methodology, a web interface is built from independent blocks, which may have elements. Both blocks and elements can have states or characteristics described by modifiers.

A web interface uses various technologies (HTML, CSS, JS, and others). Its implementation is divided into components by block. A block contains a set of technology files that represent aspects of its implementation:

The i-bem.js framework allows us to break down the client JavaScript into components in BEM terms:

Assembly

In the BEM methodology, development is modular — each block is programmed separately. The final source code of web pages is generated from the code of individual blocks using assembly procedures.

In the file system, it is convenient to represent a block as a directory, and the block implementation in each of the technologies as a separate file:

    desktop.blocks/
        my-block/
            my-block.css
            my-block.js
            my-block.bemhtml
            ...

    desktop.blocks/
        other-block/
            other-block.css
            other-block.js
            other-block.bemhtml
            ...

For each web page, the code of the blocks used on it can be put in the same types of files:

    desktop.bundles/
        index/
            index.html
            index.css
            index.js
            ...

There are two tools that support the BEM subject domain for assembling separate block descriptions into the code of resulting web pages:

Both tools automate the creation of HTML markup for binding JS blocks and passing parameters to a block instance.

Why i-bem.js is named this way

According to the BEM methodology, the base JS library of the BEM platform was originally developed as a special service block. This approach allows us to work with base libraries the same way as with regular blocks. In particular, it allows us to structure code in terms of elements and modifiers and flexibly configure the library behavior on various redefinition levels.

Service blocks in BEM were conventionally given names with the i- prefix. Thus, the name i-bem.js is read as an implementation of the i-bem block in the JS technology.

How to use i-bem.js

The i-bem.js framework is a part of the bem-core library.

The implementation of i-bem.js consists of two modules:

Dependencies:

You can use i-bem.js as a part of the full stack of BEM tools. In this case, it is convenient to base your project on the project-stub template repository, where automatic installation of dependent libraries and assembly is set up.

If you aren't planning to use other technologies of the BEM platform, you can just put the bem-core library code in an existing project.

Rate the article
Report an error on GitHub or correct using prose.io.