User:Ibax123/BEM

BEM (Block-Element-Modifier) - web-development methodology and a set of interface libraries, frameworks and auxilury tools.

Concepts
«Block», «element» and «modifier» are main concepts of BEM which are enough to describe interface of any complexity.

Block
Block is independent page component, the equivalent. A block can contain other blocks. Blocks being independent allows for their re-use, as well as facilitating the project development and support process. Block includes the whole realization of its part of interface.

Element
Element is constituent part of a block that can't be used outside of it. Blocks do not require elements .For example, a menu item is not used outside of the context of a menu block, therefore it is an element.

Modifier
Modifier defines the appearance and behavior of a block or an element. The use of modifiers is optional. Modifiers are similar in essence to HTML attributes. The same block looks different due to the use of a modifier. For instance, the appearance of the menu block (menu) may change depending on a modifier that is used on it.

Modifiers can be changed in runtime (for example, as a reaction to a DOM event of the block), or via other blocks. For example, if the wrong credentials are entered when a user clicks the Sign In button (the 'click' DOM event), the 'visible' modifier is set on a hidden block with error messages.

BEM functions
BEM provides one semantic model for all front-end web tecnologies (HTML, CSS, JavaScript, templates and etc.)

Definitions of block, element and modifier allow to describe tree structure of document. It is called BEM tree.

HTML/CSS
In HTML/CSS blocks, elements and modifiers are represented by CSS-classes called by naming convention. Several blocks can be located on one DOM-node. In this case there are two CSS-classes for one DOM-node. There can be block and other block's element on one DOM-node at the same time.

Yandex BEM naming convention
CSS-class is called after the name of block. Use hyphen to divide words in complex block names. CSS-class name of element consists of block name and element name divided by underscore. CSS-class name of modifier consists of block name and modifier name divided by underscore. If modifier is key-value, they are still divided by underscore. CSS-class of modifier is used together with class of its block or element.

Harry Roberts' naming convention
Alternative rules were suggested by Harry Roberts. He advises to use two hyphens for division of block and modifier.

Prefixes
Some rules recomend the use of prefixes. In this case all block classes will start by . Sometimes shortcut name of project is used as prefix. For example: OraanjePool->op.

JavaScript
BEM JavaScript uses abstract structure of blocks-elements and modifiers without direct use of DOM nodes and CSS classes. Frameworks or set of helpers are used to identify DOM nodes.

Application
BEM is developed and widely used by Yandex .

It is used in the framework developed for redesign and refactoring of mai.ru.

BEM is also used in new BBC site.а.

BEM is also used in Google's Material Design Lite.