BEM: Block, Element, Modifier

Development technology for web sites that need to be created quickly and maintained over many years.

BEM is used for developing the front-end of all Yandex services.

BEM methodology

The main idea of BEM is to divide the entire project code (HTML, CSS, and JavaScript) into modules and automatically assemble them into the final source code of web pages using declarations.

Any changes to the project are reduced to atomic changes to the modules or declarations.

The way the modules are integrated remains constant, and the project's code complexity does not increase as the site develops.

Using independent blocks promotes the creation of libraries of web interface components and reuse of code. Assembly allows for targeted redefinition of library blocks on the project level or for separate pages.

General terms for modular project organization:

The manager, graphic designer, layout specialist, and programmer divide the project into the same blocks, but each of them sees a block from a different perspective.

The BEM platform

BEM methodology is a web development approach that can be implemented in various ways.

For development with BEM principles, Yandex has created several tools and libraries:

The need for automated assembly of web projects led to the emergence of several tools that can be used independently of BEM:

Applying the technology

Applying BEM methodology and the BEM platform technologies is justified if: