Clean code №1: BEM methodology

04 December 2018

Clean code №1: BEM methodology

The key to increasing the effectiveness of the programmer's work is the organization of the code, its clarity and a predetermined methodology. Well-organized code affects not only the ease of further development, but also the speed of page loading by browsers. These aspects are of great importance when working in a larger team where high performance is important.



There are several methodologies whose implementation will improve the organization of work in the programming team by implementing a common code creation pattern.
This is obvious when creating a large project such as Facebook or Instagram. Unfortunately, very often smaller projects grow into large CSS files.


BEM: blocks, elements and modifiers

Blocks, elements and modifiers - these are the key elements of the BEM methodology, combined strictly with the appropriate naming convention.

Block
- an independent component such as menu, input, header
Element
- the non-independent part of the block associated with it, for example element menu, input placeholder
Modifier
- modifier of a block or element changing their design or behavior, eg color, size




Code

BEM makes the CSS code have a solid, simple and 100% reusable structure throughout the entire project. What's more, it gives us the opportunity to transport blocks from the completed project to the new one.

In summary, the most important benefit of using the methodology is more structured code. The choice you will use is secondary.
Some styles are more or less flexible, while some are easier to implement in a team.

~ Mr. O