User:Ibax123/BEM

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

File:Логотип BEM.png

Overview

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.

BEM applications

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.

<div class="header">...</div>

<ul class="menu">...</ul>

<span class="button">...</span>

<div class="tabbed-pane">...</div>

CSS-class name of element consists of block name and element name divided by underscore.

<div class="header">
    <div class="header__bottom">...</div>
</div>

<ul class="menu">
    <li class="menu__item">...</li>
</ul>

<span class="button">
    <input class="button__control">...</input>
</span>

<div class="tabbed-pane">
    <div class="tabbed-pane__panel">...</div>
</div>

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.

<div class="header header_christmas">...</div> <!-- Christmas edition of the header -->

<ul class="menu">
    <li class="menu__item menu__item_current">...</li>
</ul>

<span class="button button_theme_night">...</span>

<div class="tabbed-pane tabbed-pane_disabled">...</div>

Harry Roberts' naming convention

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

<div class="header header--christmas">...</div> <!-- Christmas edition of the header -->

<ul class="menu">
    <li class="menu__item menu__item--current">...</li>
</ul>

<span class="button button--theme-night">...</span>

<div class="tabbed-pane tabbed-pane--disabled">...</div>

Prefixes

Some rules recomend the use of prefixes. In this case all block classes will start by b-.

<div class="b-header">...</div>

<ul class="b-menu">...</ul>

<span class="b-button">...</span>

<div class="b-tabbed-pane">...</div>

Sometimes shortcut name of project is used as prefix. For example: OraanjePool->op.

<div class="op-header">...</div>

<ul class="op-menu">...</ul>

<span class="op-button">...</span>

<div class="op-tabbed-pane">...</div>

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.

Примечания

[[Category:HTML]] [[Category:JavaScript]] [[Category:Cascading Style Sheets]] [[Category:Programming languages]] [[Category:Markup languages]] [[Category:Stylesheet languages]]