BEM: Block, Element, Modifier
Development technology for web sites that need to be created quickly and maintained over many years.
- Easy to support the code structure as the project grows.
- Reuse of existing code.
- Point-by-point changes with minimal cost: design updates, adding functional elements, and so on.
BEM is used for developing the front-end of all Yandex services.
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:
- Block — A visual and functional component of the interface. For example, a menu, header, or button.
- Element — Part of a block that performs a particular function. It only exists within the block and does not have any use on its own.
- Modifier — A property of a block or element that changes its appearance or behavior. For example, color, size, and state.
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:
- bem-tools — A set of task automation tools for creating modules (blocks, elements, and modifiers) and assembling the final project code.
- bemhtml — A template engine for dividing HTML code into declarative templates corresponding to blocks, elements, and modifiers.
The need for automated assembly of web projects led to the emergence of several tools that can be used independently of BEM:
- borschik — An extensible text file assembler. Its main task is to assemble static files in web projects (CSS, JS, and so on).
- CSSO (CSS Optimizer) — A CSS optimizer that performs both structural minimization and minimization without structural changes.
- SVGO (SVG Optimizer) — A tool for optimizing vector graphics in SVG format, written in Node.js. It removes all information that does not affect image rendering.
Applying the technology
Applying BEM methodology and the BEM platform technologies is justified if:
- There are many standard projects that need to be developed quickly and maintained long-term.
- The team's efforts need to be efficiently organized: quickly engage new people, assign areas of responsibility, and optimize cooperation between various specialists (graphic designers, layout specialists, and programmers).
- Any existing code must be effectively re-used.