Maintainable Frontend Development with BEM


Published on

We are all familiar with the common interface development process which is:
* first, preparing an interface layout by a designer;
* then, making an HTML/CSS dummy;
* next, adding some JavaScript tricks with a help of JavaScript ninja;
* and, finally, having a server guy operating on templates and doing all the integration stuff.
Even while sometimes all these things are done by the same person, these are different roles and different project stages, and you switch from stage to stage to complete the development cycle.
When looking for performance gains, people often try to achieve that by changing the way the process is managed.
This presentation is about is a completely different approach which changes development from within. The goal is to convert a flat process with distinct stages into a continuous, uninterrupted development flow.
You can achieve this by decomposing a web interface into independent pieces (the so-called blocks), once and for all, and use them to build interfaces the same way bricks are used to build a house.
Thus, each of these interface components can be developed separately, which allows maintenance, refactoring and redesign to happen simultaneously on different interface parts, whenever necessary. You are not tied to a specific stage of project development anymore.
To make this happen, there are several principles you can follow:
1. Special project file structure, where files are stored the way the whole project can be built from components;
2. CSS guidelines that allow an interface piece to fit anywhere on any page without affecting other pieces;
3. In JavaScript, your functionality can be described in a highly semantic way usually unavailable with any other common approach.
All this magic is called BEM, which stands for Block, Element, and Modifier.
With my presentation, this technology will be revealed in greater detail, and magic explained bit by bit.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Maintainable Frontend Development with BEM

  1. 1. Maintainable FrontendDevelopment with BEM#b_UI Framework Team LeadVarvara Stepanova
  2. 2. Its me3
  3. 3. Search Images Video Realty Social Blogs Apps Jobs Maps Mail Marketplace etc.4
  4. 4. Next 30 minutes • Usual development cycle • Main problems it brings • BEM solutions to the problems • New development workflow • Recently happened in BEM world5
  5. 5. Usually
  6. 6. Usual development cycle and problems7
  7. 7. Usual development cycle and problems • decomposition – every time • every change starts from zero • cannot reuse your own work8
  8. 8. BEM is a world on its own • methodology of modularity • file structure recommendations • reusable libraries • helpful tools & optimizers • template engine10
  9. 9. Block • Element • Modifier11
  10. 10. Block is an independent component12
  11. 11. Page of blocks page.html <body class="page"> <div class="header"> <img class="logo" ... /> <div class="search">...</div> <div class="menu">...</div> </div> <div class="layout"> <div class="sidebar">...</div> <div class="menu">...</div> </div> </body>13
  12. 12. Some blocks have elements14
  13. 13. Block with elements page.html <div class="tabbed-pane"> <ul> <li class="tabbed-pane__tab">Tab1</li> <li class="tabbed-pane__tab">Tab2</li> </ul> <div class="tabbed-pane__panel"> ... </div> </div>15
  14. 14. Elements16
  15. 15. Block of elements17
  16. 16. Modifiers change blocks and elements <div class=" tabbed-pane tabbed-pane_theme_blue"> <!-- // --> </div> <div class=" tabbed-pane tabbed-pane_to_bottom"> <!-- // --> </div>18
  17. 17. Block • Element • Modifier19
  18. 18. What do we want?1. Ever-changing layout2. No copy-paste3. Unified semantic
  19. 19. 1. Ever-changing layout
  20. 20. Independent CSS blocks • are not affected by parents • do not affect children22
  21. 21. Independent CSS blocks • a block has its name Not id but classname selectors • no tag selectors • avoid cascade23
  22. 22. Cascade: a way to express dependency CSS .header a { text-decoration: none; } .main .photo { div.big_form .photo { width: 150px; width: 250px; height: 150px; height: 250px; } } .sidebar li { list-style: none; .big_form .photo { display: inline-block; width: 500px !important; padding: 0 0.5em; } }24
  23. 23. Improving rendering performance « The style system matches rules by starting with the key selector, then moving to the left (looking for any ancestors in the rule’s selector). David Hyatt, MDN
  24. 24. Who uses the method • Yandex • GitHub • Harry Roberts • OOCSS, SMACSS, etc.26
  25. 25. 2. No copy-paste
  26. 26. Each block is a separate CSS file blocks/ search.css menu.css search__checkbox.css menu__item.css search__autocomplete.css menu_size_big.css tabbed-pane.css tabbed-pane__tab.css book.css tabbed-pane__panel.css book__title.css28
  27. 27. ...taken when you need it! CSS @import url(blocks/header.css); @import url(blocks/search.css); @import url(blocks/tabbed-pane.css); @import url(blocks/tabbed-pane__tab.css); @import url(blocks/tabbed-pane__panel.css); @import url(blocks/book.css); @import url(blocks/book__image.css); @import url(blocks/menu.css); @import url(blocks/menu_size_big.css); @import url(blocks/menu__item.css); @import url(blocks/footer.css);29
  28. 28. Easy to share • email to a friend • version control systems30
  29. 29. Linking library to projects search maps market31
  30. 30. Services are using two block levels search maps market32
  31. 31. Project file structure with a library linked library/ # by linking a remote repo header.css footer.css menu.css ... blocks/ header.css books.css vote.css33
  32. 32. Redefining in CSS library/header.css .header { color: red; } blocks/header.css .header { color: green; }34
  33. 33. Pick up from two levels CSS @import url(library/blocks/header.css); @import url(library/blocks/search.css); @import url(blocks/search.css); @import url(library/blocks/tabbed-pane.css); @import url(library/blocks/tabbed-pane__tab.css); @import url(library/blocks/tabbed-pane__panel.css); @import url(blocks/book.css); @import url(blocks/book__image.css); @import url(library/blocks/menu.css);35
  34. 34. Automation • Make • Rake • Grunt36
  35. 35. BEM tools
  36. 36. 3. Unified semantic
  37. 37. Unified semantic Different implementations39
  38. 38. Block: CSS + JavaScript blocks/ book/ search/ book.css search.css menu/ tabbed-pane/ menu.css tabbed-pane.css menu.js tabbed-pane.js menu__item.css40
  39. 39. Block: many technologies tabbed-pane/ search/ tabbed-pane.css search__autocomplete.css tabbed-pane.js search__autocomplete.js tabbed-pane.xsl search.css search.js logo/ search.xsl logo.png logo.css logo.xsl41
  40. 40. Block: several templating solutions tabbed-pane/ search/ tabbed-pane.css search__autocomplete.css tabbed-pane.js search__autocomplete.js tabbed-pane.xsl search.css tabbed-pane.bemhtml search.js search.xsl logo/ search.bemhtml logo.png logo.css logo.xsl logo.bemhtml42
  41. 41. Block: documentation tabbed-pane/ search/ tabbed-pane.css search__autocomplete.css tabbed-pane.js search__autocomplete.js tabbed-pane.bemhtml search.css search.js logo/ search.bemhtml logo.png logo.css logo.bemhtml logo.md43
  42. 42. Services are using two block levels search maps market44
  43. 43. New dev workflow
  44. 44. Breaking an interface into blocks47
  45. 45. Fix. Grow. Improve. • single language • blocks are easy to add/move/remove • maintainability • non-stop refactoring ;-)48
  46. 46. Do we like what robots like?
  47. 47. Nice development tools • BEM tools to build pages • Borschik to flatten the CSS and JS files • CSSO to optimize50
  48. 48. CSS flattening with Borschik index.css @import url(blocks/header/header.css); @import url(blocks/menu/menu.css); ... _index.css .header { ... } .menu { ... }51
  49. 49. JavaScript flattening with Borschik index.js /*borschik:include:blocks/menu/menu.js*/ /*borschik:include:blocks/tabbed-pane/tabbed-pane.js*/ ... _index.js /* Menu block begins */ (function($) { $(.menu__item).on(click, function(e) { $(this).toggleClass(menu__item_state_current); }); })(jQuery);52
  50. 50. Nice development tools • BEM tools to build pages • Borschik to flatten the CSS and JS files • CSSO to optimize53
  51. 51. Optimizing with CSSO DEVELOPMENT .header { color: red; } .header { color: green; } PRODUCTION .header { color: green; }54
  52. 52.
  53. 53. Recently in BEM world
  54. 54. The evolution of BEM by Max Shirshin and Vitaly Harisov
  55. 55. Several block libraries • common library of 100+ blocks • distinct libraries – search services – map services – image services ...58
  56. 56. Linking several libraries to a project common-lib/ maps-lib/ header/ map/ footer/ map-point/ layout/ ... ... search-lib/ blocks/ header/ books/ search-form/ header/ ... map-point/ ...59
  57. 57. Any library needs... • web site – documentation – block examples • release workflow – changelogs – unit tests60
  58. 58. Docs generating tool
  59. 59. What to do with BEM? • follow recommendations – modular everything (CSS, JS, etc.) – file structure – building projects • participate • write your own libraries62
  60. 60. http://bem.info63
  61. 61. Varvara Stepanova UI Framework Team Lead @toivonens @bem_twThank you
  62. 62. #b_ Sunday, 24th Feb MeetUp