BEM Methodology basics explained. A presentation made for Brandwatch company in Berlin.

1. BEM it!
Introduction to BEM Methodology
by Max Shirshin
Frontend Team Lead, Deltamethod
Consultant, Yandex

2. Why bother?

3. There is no unified semantic model
across different FE technologies
● HTML stands for hypertext
I've heard we mostly do web apps...
● CSS offers no structure out of the box
Usually a pile of rules put together. Sorry.
● JavaScript uses its own approaches.
...a new one comes with every framework.

4. Frameworks are not enough
● ≈ 8,500 packages in Bower registry
● JavaScript:
the most popular language on GitHub
Repositories created:
≈ 264,000 in 2013
≈ 296,000 in 2012

5. BEM to the rescue

6. What is BEM?
BEM claims that simple semantic model
(Blocks, Elements, and Modifiers)
is 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.

7. What is BEM?
● BEM is a methodology, not a framework
Semantic model + best practices
for all things frontend
● BEM is a fix for web app semantics
...the same as jQuery is a fix for DOM APIs
● Originally introduced by Yandex
— 19 million daily audience
— 200+ web services
— tools, code, tutorials, conferences
— open source

8. Some theory

9. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu

10. What is BEM?
BLOCK
– Standalone part of an interface:
● button
● text field
● flyout
● heading
● menu
– Re-usable in different contexts
– Self-sufficient

11. What is BEM?
ELEMENT
– An integral part of a block:
● button
● text field
● flyout
● heading
● menu

12. What is BEM?
ELEMENT
– An integral part of a block:
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item

13. What is BEM?
ELEMENT
– An integral part of a block:
● button — contains no elements
● text field label
● flyout title
● heading logo
● menu item
– No standalone meaning outside of a block
– Some blocks have no elements

14. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button
● text field
● flyout
● heading
● menu item

15. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type

16. What is BEM?
MODIFIER
– Defines property or state on a block or element:
● button theme
● text field editable state
● flyout alignment
● heading level
● menu item bullet type
– Multiple modifiers may co-exist
on a single block/element

17. BEM forms a semantic overlay over the
existing DOM structure.
This overlay is called a BEM tree.

18. DOM tree → BEM tree

19. How does BEM map to DOM?
● Blocks/elems/mods are denoted
with CSS classes using a naming convention.
● DOM nodes can be shared:
— block1 + block2 may occupy the same
container;
— element1 + block2 may co-exist on
the same node.
● DOM is encapsulated:
— complex DOM structure may constitute
a single element

20. BEM HOWTO
for your beloved project
with benefits explained

21. HOWTO: HTML / CSS

22. CSS naming conventions
“BEM uses CSS class names to denote
blocks, elements and modifiers.”

23. CSS naming conventions
BLOCK
.b-button
.b-text-field
.b-flyout
.b-heading
.b-menu

24. CSS naming conventions
<ul class=”b-menu”>
<li>
<a href=”/more”>Read More</a>
</li>
<li>
<a href=”/buy”>Buy Online</a>
</li>
<li>
<a href=”/buy”>Contact</a>
</li>
</ul>

25. CSS naming conventions
ELEMENT
.b-button__icon
.b-text-field__label
.b-flyout__title
.b-heading__logo
.b-menu__item

26. CSS naming conventions
<ul class=”b-menu”>
<li class=”b-menu__item”>
<a href=”/more”>Read More</a>
</li>
<li class=”b-menu__item”>
<a href=”/buy”>Buy Online</a>
</li>
<li class=”b-menu__item”>
<a href=”/buy”>Contact</a>
</li>
</ul>

27. CSS naming conventions
MODIFIER
.b-button_theme_dark
.b-text-field_editable
.b-flyout_align_top
.b-heading_level_alpha
.b-menu__item_promo

28. CSS naming conventions
<ul class=”b-menu”>
<li class=”b-menu__item”>
<a href=”/more”>Read More</a>
</li>
<li class=”b-menu__item”>
<a href=”/buy”>Buy Online</a>
</li>
<li class=”b-menu__item”>
<a href=”/buy”>Contact</a>
</li>
</ul>

29. CSS naming conventions
<ul class=”b-menu”>
<li class=”b-menu__item b-menu__item_promo”>
<a href=”/more”>Read More</a>
</li>
<li class=”b-menu__item”>
<a href=”/buy”>Buy Online</a>
</li>
<li class=”b-menu__item”>
<a href=”/buy”>Contact</a>
</li>
</ul>

30. so structure
much much semantics
wow
very code
such frontend

31. BEM CSS: best practices
1. Map the whole document to BEM blocks
2. No CSS outside of blocks
3. Independent blocks → no CSS resets

32. Benefits!
Drop tag names and IDs
● Faster selectors
● Re-use same semantics on any tag:
— <DIV class=”b-block”>
— <SPAN class=”b-block”>
— <TABLE class=”b-block”>

33. Benefits!
CSS specificity magic solved
Priority of CSS rules:
by specificity first, then by rule order
td.data { background-color: gray }
td.summary { background-color: white }
.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- Still gray, baby :-( -->
</TD>

34. Benefits!
CSS specificity magic solved
Priority of CSS rules:
by specificity first, then by rule order
td.data { background-color: gray }
td.summary { background-color: white }
td.total-summary { background-color: yellow }
<TD class="summary total-summary">
<!-- This works, I'm yellow now -->
</TD>

35. 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?

36. Benefits!
Bye-bye CSS cascade?!
...well, not exactly.
Example of an element affected by a block modifier:
/* theme menu items for a dark theme */
.b-menu_theme_dark .b-menu__item
{
color: white;
background-color: darkgray;
}

37. HOWTO:
Block dependencies

38. Download Help Contact
password LLooggiinn
Main
username

39. mmeennuu
Download Help Contact
password LLooggiinn
Main
username
hheeaaddeerr
tteexxtt iinnppuutt tteexxtt iinnppuutt bbuuttttoonn

40. Download Help Contact
_size_small _size_small _primary
password LLooggiinn
Main
username

41. Download Help Contact
password LLooggiinn
Main
username
.b-header .b-input { font-size: 0.85em }
.b-header .b-button { background: navy }

42. Download Help Contact
password LLooggiinn
Main
username
.b-header .b-input { font-size: 0.85em }
.b-header .b-button { background: navy } !

43. HOWTO: JavaScript

44. JavaScript
Components → Blocks
Work with BEM tree, not DOM tree

45. JavaScript
jQuery BEM helpers
https://github.com/ingdir/jquery-bemhelpers
● Helper methods to work with BEM modifiers
● Callbacks on modifiers set/change

46. JavaScript
jQuery BEM helpers
// find a block with jQuery selectors
var $block = component.find('div');
// assign a callback to a modifier change
$block.onSetMod('b-block', {
status: {
loaded: myCallback
}
});
/* ... */
$block.setMod('b-block', 'status', 'loaded');
// 1. adds a CSS class b-block_status_loaded
// 2. runs myCallback()

47. JavaScript
jQuery BEM plugin
http://xslc.org/jquery-bem/
● Extends jQuery Sizzle with selectors for BEM
entities (mix them with “normal” selectors)
● Add callbacks on modifiers set/change
● Supports methods tied to blocks/elements

48. 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

49. HTML is no longer semantic.
JavaScript is.

50. HOWTO: Design / UX

51. BEM is the universal language
for developers and designers,
the bridge across technology gaps.

52. Build your block library.
The code itself is the styleguide.

53. UX + Frontend
● Live style guide
● Always up-to-date
● Prototyping mapped to code from day one
● Designers and devs speak the same
language
● Good for making early estimates

54. HOWTO: File structure

55. 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

56. File and folder structure
Advanced structure to expose semantics
/block
/__elem1
block__elem1.css
block__elem1.tpl
/_mod
block_mod.css
block.css
block.js
block.tpl

57. Redefinition Levels
/common
/block
/__elem1
block__elem1.css
block__elem1.tpl
/_mod
block_mod.css
block.css
block.js
block.tpl
/my-page
/block
/__elem1
block__elem1.css
/_mod2
block_mod2.css

58. Redefinition Levels
/common
/block
/__elem1
block__elem1.css
block__elem1.tpl
/_mod
block_mod.css
block.css
block.js
block.tpl
/my-page
/block
/__elem1
block__elem1.css
/_mod2
block_+ mod2.css

59. 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

60. Thank you Brandwatch!
max.shirshin@gmail.com google.com/+MaxShirshin
@ingdir maxshirshin