5. What is BEM?
“BEM claims that three basic entities
(Blocks, Elements, and Modifiers)
are enough to define the way you author
HTML / CSS / JavaScript, structure code
and components, set up interaction
and scale your project to build
an industry-leading service.”
6. What is BEM?
● A methodology
“Theoretical underpinning” for methods and best
practices
7. What is BEM?
● A methodology
“Theoretical underpinning” for methods and best
practices
● Originally introduced by Yandex
— www.yandex.ru (English: www.yandex.com)
— 200+ Yandex services using full BEM stack
(methodology + tools)
— 19 million users daily audience
8. What is BEM?
● A methodology
“Theoretical underpinning” for methods and best
practices
● Originally introduced by Yandex
— www.yandex.ru (English: www.yandex.com)
— 200+ Yandex services using full BEM stack
(methodology + tools)
— 19 million users daily audience
● Used by external projects
— other services
— tools / libraries
10. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
11. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
– Re-usable in different contexts
– Self-sufficient
12. What is BEM?
ELEMENT
– An integral part of a block:
● button
● text field
● flyout
● heading
● menu
13. What is BEM?
ELEMENT
– An integral part of a block:
● button icon
● text field label
● flyout title
● heading logo
● menu item
14. What is BEM?
ELEMENT
– An integral part of a block:
● button icon
● text field label
● flyout title
● heading logo
● menu item
– No standalone meaning outside of a block
– Some blocks have no elements
15. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button
● text field
● flyout
● heading
● menu item
16. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button color
● text field disabled state
● flyout alignment
● heading level
● menu item bullet type
17. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button color
● text field disabled state
● flyout alignment
● heading level
● menu item bullet type
– Multiple modifiers may co-exist
on a single block/element
19. BEM + DOM
● Blocks are mapped to DOM
● Blocks/elems/mods are denoted
with CSS classes
20. BEM + DOM
● Blocks are mapped to DOM
● Blocks/elems/mods are denoted
with CSS classes
● DOM nodes can be “shared”: you can mix
(block1 + block2) or (element1 + block2)
on a same node
21. BEM markup forms a semantic overlay
over the existing DOM structure.
This overlay is called a BEM tree.
33. Additional notes on CSS
● Page (Document) is also a block
● Layouts are blocks (same rules apply)
34. Additional notes on CSS
● Page (Document) is also a block
● Layouts are blocks (same rules apply)
● No CSS outside of blocks
35. Additional notes on CSS
● Page (Document) is also a block
● Layouts are blocks (same rules apply)
● No CSS outside of blocks
● No common CSS resets (block independency!)
36. Additional notes on CSS
● Page (Document) is also a block
● Layouts are blocks (same rules apply)
● No CSS outside of blocks
● No common CSS resets (block independency!)
● No “shared” styles (no need)
37. Additional notes on CSS
● Page (Document) is also a block
● Layouts are blocks (same rules apply)
● No CSS outside of blocks
● No common CSS resets (block independency!)
● No “shared” styles (no need)
● DOM tree → BEM tree
39. Benefits!
Drop tag names and IDs
● Faster selectors
● Re-use same semantic block on:
— <DIV class=”b-block”>
— <SPAN class=”b-block”>
— <TABLE class=”b-block”>
45. Benefits!
Bye-bye CSS cascade?!
Only one CSS class needed to:
● style a block container
● style any element within a block
● add extras/overrides with a modifier
Doesn't it cover 90% of your styling needs?
46. Benefits!
Bye-bye CSS cascade?!
...well, not exactly.
Example of an element affected by a block modifier:
/* hide labels for disabled text fields */
.b-text-input_disabled .b-text-input__label
{
display: none;
}
50. JavaScript
i-bem.js framework by Yandex + tutorial
https://github.com/toivonen/bem-js-tutorial
● First English draft docs (expect more!)
● 100% BEM-based declarative API
● Part of a larger bem-core library
51. JavaScript
Twitter Flight (used by Deltamethod)
http://flightjs.github.io
● Self-contained components, 100% event-driven
● Based on jQuery; AMD-friendly; BEM-friendly
● Built-in syntax sugar for predefined selectors
(good for BEM tree)
● [Shameless self-promo] Try Flight with Reggirt:
http://github.com/ingdir/reggirt
jQuery plugin that emulates event capturing
(opposite of event bubbling)
52. JavaScript
Twitter Flight (used by Deltamethod)
http://flightjs.github.io
● Self-contained components, 100% event-driven
● Based on jQuery; AMD-friendly; BEM-friendly
● Built-in syntax sugar for predefined selectors
(good for BEM tree)
● [Shameless self-promo] Try Flight with Reggirt:
http://github.com/ingdir/reggirt
jQuery plugin that emulates event capturing
(opposite of event bubbling)
64. File and folder structure
Flat block structure with a folder for each block.
Simple structure for BEM beginners:
/b-block
block.css
block.js
block.tpl
...whatever you need
67. Benefits!
● Unified structure for automation
● Redefinition levels: different libraries, same
structure
/common
/b-block
/css
block.css
/template
block.tpl
/app1
/b-block
/css
block__elem1.css
/js
block.js
/template
block__elem1.tpl
+
68. Build process and deployment
Use a build tool!
Borschik:
an open-source build tool by Yandex
Code:
https://github.com/bem/borschik
English docs:
http://bem.info/articles/borschik