Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
BEM it! 
Introduction to BEM Methodology 
by Max Shirshin 
Frontend Team Lead, Deltamethod 
Consultant, Yandex
Why bother?
There is no unified semantic model 
across different FE technologies 
● HTML stands for hypertext 
I've heard we mostly do...
Frameworks are not enough 
● ≈ 8,500 packages in Bower registry 
● JavaScript: 
the most popular language on GitHub 
Repos...
BEM to the rescue
What is BEM? 
BEM claims that simple semantic model 
(Blocks, Elements, and Modifiers) 
is enough to define the way you au...
What is BEM? 
● BEM is a methodology, not a framework 
Semantic model + best practices 
for all things frontend 
● BEM is ...
Some theory
What is BEM? 
BLOCK 
– Standalone part of an interface: 
● button 
● text field 
● flyout 
● heading 
● menu
What is BEM? 
BLOCK 
– Standalone part of an interface: 
● button 
● text field 
● flyout 
● heading 
● menu 
– Re-usable ...
What is BEM? 
ELEMENT 
– An integral part of a block: 
● button 
● text field 
● flyout 
● heading 
● menu
What is BEM? 
ELEMENT 
– An integral part of a block: 
● button — contains no elements 
● text field label 
● flyout title...
What is BEM? 
ELEMENT 
– An integral part of a block: 
● button — contains no elements 
● text field label 
● flyout title...
What is BEM? 
MODIFIER 
– Defines property or state on a block or element: 
● button 
● text field 
● flyout 
● heading 
●...
What is BEM? 
MODIFIER 
– Defines property or state on a block or element: 
● button theme 
● text field editable state 
●...
What is BEM? 
MODIFIER 
– Defines property or state on a block or element: 
● button theme 
● text field editable state 
●...
BEM forms a semantic overlay over the 
existing DOM structure. 
This overlay is called a BEM tree.
DOM tree → BEM tree
How does BEM map to DOM? 
● Blocks/elems/mods are denoted 
with CSS classes using a naming convention. 
● DOM nodes can be...
BEM HOWTO 
for your beloved project 
with benefits explained
HOWTO: HTML / CSS
CSS naming conventions 
“BEM uses CSS class names to denote 
blocks, elements and modifiers.”
CSS naming conventions 
BLOCK 
.b-button 
.b-text-field 
.b-flyout 
.b-heading 
.b-menu
CSS naming conventions 
<ul class=”b-menu”> 
<li> 
<a href=”/more”>Read More</a> 
</li> 
<li> 
<a href=”/buy”>Buy Online</...
CSS naming conventions 
ELEMENT 
.b-button__icon 
.b-text-field__label 
.b-flyout__title 
.b-heading__logo 
.b-menu__item
CSS naming conventions 
<ul class=”b-menu”> 
<li class=”b-menu__item”> 
<a href=”/more”>Read More</a> 
</li> 
<li class=”b...
CSS naming conventions 
MODIFIER 
.b-button_theme_dark 
.b-text-field_editable 
.b-flyout_align_top 
.b-heading_level_alph...
CSS naming conventions 
<ul class=”b-menu”> 
<li class=”b-menu__item”> 
<a href=”/more”>Read More</a> 
</li> 
<li class=”b...
CSS naming conventions 
<ul class=”b-menu”> 
<li class=”b-menu__item b-menu__item_promo”> 
<a href=”/more”>Read More</a> 
...
so structure 
much much semantics 
wow 
very code 
such frontend
BEM CSS: best practices 
1. Map the whole document to BEM blocks 
2. No CSS outside of blocks 
3. Independent blocks → no ...
Benefits! 
Drop tag names and IDs 
● Faster selectors 
● Re-use same semantics on any tag: 
— <DIV class=”b-block”> 
— <SP...
Benefits! 
CSS specificity magic solved 
Priority of CSS rules: 
by specificity first, then by rule order 
td.data { backg...
Benefits! 
CSS specificity magic solved 
Priority of CSS rules: 
by specificity first, then by rule order 
td.data { backg...
Benefits! 
Bye-bye CSS cascade?! 
Only one CSS class needed to: 
● style a block container 
● style any element within a b...
Benefits! 
Bye-bye CSS cascade?! 
...well, not exactly. 
Example of an element affected by a block modifier: 
/* theme men...
HOWTO: 
Block dependencies
Download Help Contact 
password LLooggiinn 
Main 
username
mmeennuu 
Download Help Contact 
password LLooggiinn 
Main 
username 
hheeaaddeerr 
tteexxtt iinnppuutt tteexxtt iinnppuut...
Download Help Contact 
_size_small _size_small _primary 
password LLooggiinn 
Main 
username
Download Help Contact 
password LLooggiinn 
Main 
username 
.b-header .b-input { font-size: 0.85em } 
.b-header .b-button ...
Download Help Contact 
password LLooggiinn 
Main 
username 
.b-header .b-input { font-size: 0.85em } 
.b-header .b-button ...
HOWTO: JavaScript
JavaScript 
Components → Blocks 
Work with BEM tree, not DOM tree
JavaScript 
jQuery BEM helpers 
https://github.com/ingdir/jquery-bemhelpers 
● Helper methods to work with BEM modifiers 
...
JavaScript 
jQuery BEM helpers 
// find a block with jQuery selectors 
var $block = component.find('div'); 
// assign a ca...
JavaScript 
jQuery BEM plugin 
http://xslc.org/jquery-bem/ 
● Extends jQuery Sizzle with selectors for BEM 
entities (mix ...
JavaScript 
i-bem.js framework by Yandex + tutorial 
https://github.com/toivonen/bem-js-tutorial 
● First English draft do...
HTML is no longer semantic. 
JavaScript is.
HOWTO: Design / UX
BEM is the universal language 
for developers and designers, 
the bridge across technology gaps.
Build your block library. 
The code itself is the styleguide.
UX + Frontend 
● Live style guide 
● Always up-to-date 
● Prototyping mapped to code from day one 
● Designers and devs sp...
HOWTO: File structure
File and folder structure 
Flat block structure with a folder for each block. 
Simple structure for BEM beginners: 
/b-blo...
File and folder structure 
Advanced structure to expose semantics 
/block 
/__elem1 
block__elem1.css 
block__elem1.tpl 
/...
Redefinition Levels 
/common 
/block 
/__elem1 
block__elem1.css 
block__elem1.tpl 
/_mod 
block_mod.css 
block.css 
block...
Redefinition Levels 
/common 
/block 
/__elem1 
block__elem1.css 
block__elem1.tpl 
/_mod 
block_mod.css 
block.css 
block...
Build process and deployment 
Use a build tool! 
Borschik: 
an open-source build tool by Yandex 
Code: 
https://github.com...
Thank you Brandwatch! 
max.shirshin@gmail.com google.com/+MaxShirshin 
@ingdir maxshirshin
Upcoming SlideShare
Loading in …5
×

BEM It! for Brandwatch

8,382 views

Published on

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

Published in: Internet

BEM It! for Brandwatch

  1. 1. BEM it! Introduction to BEM Methodology by Max Shirshin Frontend Team Lead, Deltamethod Consultant, Yandex
  2. 2. Why bother?
  3. 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. 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. 5. BEM to the rescue
  6. 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. 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. 8. Some theory
  9. 9. What is BEM? BLOCK – Standalone part of an interface: ● button ● text field ● flyout ● heading ● menu
  10. 10. What is BEM? BLOCK – Standalone part of an interface: ● button ● text field ● flyout ● heading ● menu – Re-usable in different contexts – Self-sufficient
  11. 11. What is BEM? ELEMENT – An integral part of a block: ● button ● text field ● flyout ● heading ● menu
  12. 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. 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. 14. What is BEM? MODIFIER – Defines property or state on a block or element: ● button ● text field ● flyout ● heading ● menu item
  15. 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. 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. 17. BEM forms a semantic overlay over the existing DOM structure. This overlay is called a BEM tree.
  18. 18. DOM tree → BEM tree
  19. 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. 20. BEM HOWTO for your beloved project with benefits explained
  21. 21. HOWTO: HTML / CSS
  22. 22. CSS naming conventions “BEM uses CSS class names to denote blocks, elements and modifiers.”
  23. 23. CSS naming conventions BLOCK .b-button .b-text-field .b-flyout .b-heading .b-menu
  24. 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. 25. CSS naming conventions ELEMENT .b-button__icon .b-text-field__label .b-flyout__title .b-heading__logo .b-menu__item
  26. 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. 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. 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. 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. 30. so structure much much semantics wow very code such frontend
  31. 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. 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. 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. 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. 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. 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. 37. HOWTO: Block dependencies
  38. 38. Download Help Contact password LLooggiinn Main username
  39. 39. mmeennuu Download Help Contact password LLooggiinn Main username hheeaaddeerr tteexxtt iinnppuutt tteexxtt iinnppuutt bbuuttttoonn
  40. 40. Download Help Contact _size_small _size_small _primary password LLooggiinn Main username
  41. 41. Download Help Contact password LLooggiinn Main username .b-header .b-input { font-size: 0.85em } .b-header .b-button { background: navy }
  42. 42. Download Help Contact password LLooggiinn Main username .b-header .b-input { font-size: 0.85em } .b-header .b-button { background: navy } !
  43. 43. HOWTO: JavaScript
  44. 44. JavaScript Components → Blocks Work with BEM tree, not DOM tree
  45. 45. JavaScript jQuery BEM helpers https://github.com/ingdir/jquery-bemhelpers ● Helper methods to work with BEM modifiers ● Callbacks on modifiers set/change
  46. 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. 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. 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. 49. HTML is no longer semantic. JavaScript is.
  50. 50. HOWTO: Design / UX
  51. 51. BEM is the universal language for developers and designers, the bridge across technology gaps.
  52. 52. Build your block library. The code itself is the styleguide.
  53. 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. 54. HOWTO: File structure
  55. 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. 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. 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. 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. 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. 60. Thank you Brandwatch! max.shirshin@gmail.com google.com/+MaxShirshin @ingdir maxshirshin

×