4 advantages to use BEM
BEM is a methodology of web-development. The base of the method is to create common semantic structure of the whole project, regardless the technology that is used during the development.
Abbreviation BEM deciphers as a block, an element and modifier. Thus, the whole project, created based on BEM is a set of blocks, elements and modifiers.
Look on in details the advantages of using such methodology.
1. Independence
The most complicated stage at the beginning of using BEM is to make a model on blocks and elements correctly. It is important that the structure of blocks is not necessarily the same with DOM-structure. Here is important to follow the next two rules:
1. If and element of the model can be used singularly regardless from another component here it is a block.
2. If the component can be used only together with another one there is the element.
Thus, the main components of the model are blocks that do not depend on each other and can be used singularly.
2. An opportunity of re-usage
According to the methodology of BEM, you can not set styles that influence on its position in the model (drawbacks, positioning etc). The modifiers are responsible for it.
With the help of modifiers, the block saves only main styles and a behavior pattern. As was mentioned above, a broken model is a set of independent blocks.
Thanks for it, every block can be re-used in the frames of current project and during development other ones. Apart from, we are not tided to using HTML-tags. During the next using of block we can change them without any consequences for appearance and functionality.
However, there is a need to style different blocks and elements of different blocks sometimes. In order to keep BEM-structure of the project and in the same time to optimize the amount of CSS-code, the definition mix was added to BEM. A Mix is a separate class that has necessary styles. This class can be added to different blocks and elements, not breaking general rules of classes names on BEM and saving the opportunity of re-usage of the components.
3. Convenience and ease of project support
The convenience and ease of project support is achieved through:
1. the file structure of the project;
2. Nyman components.
The BEM documentation describes the recommended file structure (Nested). It is constructed to create separate directories for each block and the corresponding sub directories for elements and modifiers within the block directory.
The realization of the component is divided into separate files with an extension that corresponds to the realization technology. Names of directories and files correspond to component names.
This means that for each component we have a separate folder that contains everything you need to use such a component in any project.
Also, BEM developers offer alternatives to this system - Flat and Flex, and draw you attention on that any file structure that complies with the BEM principles can be used in the framework of BEM.
The file structure can be selected separately for the needs of each project, but the most convenient is Nested when maintaining the block and reuse the blocks on other projects.
No less important issue in the BEM is the question of naming the components. The BEM documentation offers some rules by name:
- Complex names are written through the hyphen:
- Item names start with 2 underlines;
- Modifier names begin with one underline.
There are also many alternative schemes for naming BEM components. However, which of the ways you would not choose, the main thing is to follow to its rules throughout the project. This will allow you to quickly understand the code and styles.
4. The code structuring
One of the main principles of BEM is to divide the code into logical parts. It is related as to component sectoring as to its appearance and functionality.
It is similar to file structure of the project and facilitates the navigation on the project and re-usage of components.
The principle of united responsibility is one more principle of BEM. Practically it means that every modifier can be responsible for one thing.
The principle of openness / closure means that components can be modified, but not changed.
Thus, following the basic principles of BEM, it is possible to obtain a logical, easy-to-read code that is sufficiently simple to maintain and reuse.