This presentation has been prepared by Oleksii Prohonnyi for internal JS team meeting to improve skills of junior developers.

1. BEM methodology overview
_by Oleksii Prohonnyi

2. DEFINITION

4. BEM (stands for Block, Element, Modifier)
It's a way of describing reality in code, a
range of patterns, and a way of thinking
about program entities regardless of
programming languages being used.
<bem.info>

5. HISTORY

6. From 2005
CSS classes for blocks got prefixes (b-, c-,
g-) to provide sort of a namespace
emulation in CSS.

9. Independent Block concept
was the basis of Yandex HTML layouts, was
featured at the ClientSide'2007 conference
in Moscow, Russia.

10. Absolutely Independept Block (AIB)
 Only classnames (not IDs) should be used to describe styles.
 Each block classname has a prefix.
 Any CSS rules except ones prefixed with g- must belong to a
block.
 Compound blocks were allowed (or sometimes, required) to have
nested blocks embedded.
 never match CSS to tagnames, use classnames for everything:
.b-user b -> .b-user .first-letter
 classnames for block elements must be prefixed with the parent
block name: .b-user .first-letter -> .b-user-first_letter

11. Prefixes and Modifications
Team invented four prefixes allowed for block names:
 b- common blocks
 h- holsters, used for gluing several elements together
 l- layout grids
 g- global styles
Modification can be defined as a specific state of a block, or as a
flag that holds some specific property.

12. Going open source
In 2010, team had published some code on
GitHub account to continue growing as an
open source project.

13. BEM: HOW IT WORKS?

15. BEM: HOW IT WORKS?
Mark out “blocks”

17. Definitions
Blocks
A block is an independent entity, a "building block" of an application.
A block can be either simple or compound (containing other blocks).
E.g. Search form block
Elements
An element is a part of a block that performs a certain function.
Elements are context-dependent: they only make sense in the
context of the block they belong to.
E.g. An input field and a button are elements of the Search Block

19. BEM: HOW IT WORKS?
Describe page layout in plain text

22. BEM: HOW IT WORKS?
Block independence

24. From the CSS point of view
 A block (or an element) must have a unique "name" (a CSS
class) that could be used in a CSS rule.
 HTML elements must not be used in CSS selectors (.menu td) as
such selectors are inherently not context-free.
 Cascading selectors should be avoided.

25. From the template engine perspective
 Blocks and elements must be described in the input data Blocks
(or elements) must have unique "names" to make things like
"Menu should be placed here" expressible in our templates.
 Blocks may appear anywhere in a BEM tree.

26. BEM: HOW IT WORKS?
Modifiers for blocks

30. BEM: HOW IT WORKS?
Subject-matter abstraction

32. BEM: HOW IT WORKS?
Blocks consistency

33. Blocks consistency
To have a block present on a page as a UI element it should be
implemented it in the following techs:
 Templates (XSL, TT2, JavaScript, etc), which turn block
declarations into HTML code
 CSS that describes appearance of the block
 A JavaScript implementation for the block, if a block has dynamic
behavior
 Images
 Documentation
Everything that constitutes a block is a block technology.

34. BEM: HOW IT WORKS?
Real examples

35. Real examples
All the services of Yandex have BEM in their CSS and JavaScript
code and XSL templates of the pages. E.g.
 Yandex.Maps
 Yandex.Images
 Yandex.Video
 Yandex.Auto
 Turkish Yandex
More examples:
 Rambler.News
 HeadHunter
 TNK Racing Team

36. LIBRARIES

37. BEM libraries
 bem-core is a core library required for starting your own BEM-
powered project. It provides sufficient number of blocks
necessary for client-side JavaScript coding and templating.
 bem-bl is an extended library that consists not only of basic
blocks but also of a number of generic solutions for displaying a
menu, text, logo, search tab, table and so on.
 bem-components is a library of web-forms management blocks.
It contains basic implementation techniques independent from
design and allows to apply optional themes such as new
Yandex.Islands design.
 More libraries

38. TOOLS

39. TOOLS
bem-tools

40. bem-tools
A toolkit for working with files based on BEM methodology.
It allows to:
 create entities
 build final runtime
 work with build declarations: merge, subtract and intersect them
 build the whole project using bem make command
 launch development server on the project source tree using bem
server command.
 Documentation: https://en.bem.info/tools/bem/bem-tools/

41. TOOLS
Testing

42. Testing
Gemini is the utility for regression testing of web pages appearance.
Its key features are:
 Compatibility with different browsers (see notes about IE);
 Ability to test separate sections of a web page;
 Position and size of an element are calculated including its box-shadow and
outline properties;
 Some special case differences between images (rendering artifacts, text
caret, etc.) are ignored;
 CSS test coverage statistics.
Documentation: https://en.bem.info/tools/testing/gemini/
html-differ
Documentation: https://en.bem.info/tools/testing/html-differ/

43. TOOLS
Optimizers

44. Optimizers
borschik is an extendable builder for text-based file formats. Its main
purpose is assembly of static files for web projects (CSS, JS, etc.).
Documentation: https://en.bem.info/tools/optimizers/borschik/
CSSO (CSS Optimizer) is a CSS minimizer unlike others. In
addition to usual minification techniques it can perform structural
optimization of CSS files, resulting in smaller file size compared to
other minifiers.
Documentation: https://en.bem.info/tools/optimizers/csso/
SVG Optimizer is a Nodejs-based tool for optimizing SVG vector
graphics files.
Documentation: https://en.bem.info/tools/optimizers/svgo/svgo/

45. TOOLS
Languages / Parsers

46. Languages / Parsers
OMetaJS is a JavaScript implementation of OMeta, an object-
oriented language for pattern matching.
Documentation: https://github.com/veged/ometa-js#ometajs
XJST is a DSL for universal data transformations with compiler
written on top of the node.js and ometajs and output code working
in any browser or on server-side.
Documentation: http://en.bem.info/tools/templating-engines/xjst/
Shmakowiki is yet another wiki dialect, inspired by WackoWiki and
WikiCreole.
Documentation: https://github.com/veged/shmakowiki

47. REFERENCES

48. References
 https://en.bem.info/
 http://getbem.com/
 https://github.com/bem
 https://css-tricks.com/bem-101/
 https://tech.yandex.ru/bem/

50. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi