Maintainable Frontend Development with BEM
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.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Destaque
Destaque (20)
Semelhante a Maintainable Frontend Development with BEM
Semelhante a Maintainable Frontend Development with BEM (20)
Mais de Varya Stepanova
Último
Último (20)
Maintainable Frontend Development with BEM
- 2. Maintainable Frontend Development with BEM #b_ UI Framework Team Lead Varvara Stepanova
- 3. It's me 3
- 4. Search Images Video Realty Social Blogs Apps Jobs Maps Mail Marketplace etc. 4
- 5. Next 30 minutes • Usual development cycle • Main problems it brings • BEM solutions to the problems • New development workflow • Recently happened in BEM world 5
- 6. Usually
- 7. Usual development cycle and problems 7
- 8. Usual development cycle and problems • decomposition – every time • every change starts from zero • cannot reuse your own work 8
- 10. BEM is a world on its own • methodology of modularity • file structure recommendations • reusable libraries • helpful tools & optimizers • template engine 10
- 11. Block • Element • Modifier 11
- 12. Block is an independent component 12
- 13. 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
- 14. Some blocks have elements 14
- 15. 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
- 16. Elements 16
- 18. Modifiers change blocks and elements <div class=" tabbed-pane tabbed-pane_theme_blue"> <!-- // --> </div> <div class=" tabbed-pane tabbed-pane_to_bottom"> <!-- // --> </div> 18
- 19. Block • Element • Modifier 19
- 20. What do we want? 1. Ever-changing layout 2. No copy-paste 3. Unified semantic
- 22. Independent CSS blocks • are not affected by parents • do not affect children 22
- 23. Independent CSS blocks • a block has its name Not id but classname selectors • no tag selectors • avoid cascade 23
- 24. 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
- 25. 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 mzl.la/UuwZql 25
- 26. Who uses the method • Yandex bit.ly/bem-riga-2012 • GitHub bit.ly/github-css • Harry Roberts inuitcss.com • OOCSS, SMACSS, etc. 26
- 27. 2. No copy-paste
- 28. 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.css 28
- 29. ...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
- 30. Easy to share • email to a friend • version control systems 30
- 31. Linking library to projects search maps market 31
- 32. Services are using two block levels search maps market 32
- 33. 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.css 33
- 34. Redefining in CSS library/header.css .header { color: red; } blocks/header.css .header { color: green; } 34
- 35. 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
- 36. Automation • Make • Rake • Grunt 36
- 37. BEM tools git.io/bem-tools 37
- 39. Unified semantic Different implementations 39
- 40. 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.css 40
- 41. 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.xsl 41
- 42. 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.bemhtml 42
- 43. Block: documentation tabbed-pane/ search/ tabbed-pane.css search__autocomplete.css tabbed-pane.js search__autocomplete.js tabbed-pane.bemhtml search__autocomplete.md tabbed-pane.md search.css search.js logo/ search.bemhtml logo.png search.md logo.css logo.bemhtml logo.md 43
- 44. Services are using two block levels search maps market 44
- 45. New dev workflow
- 47. Breaking an interface into blocks 47
- 48. Fix. Grow. Improve. • single language • blocks are easy to add/move/remove • maintainability • non-stop refactoring ;-) 48
- 49. Do we like what robots like?
- 50. Nice development tools • BEM tools to build pages • Borschik to flatten the CSS and JS files • CSSO to optimize 50
- 51. CSS flattening with Borschik index.css @import url(blocks/header/header.css); @import url(blocks/menu/menu.css); ... _index.css .header { ... } .menu { ... } 51
- 52. 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
- 53. Nice development tools • BEM tools to build pages • Borschik to flatten the CSS and JS files • CSSO to optimize 53
- 54. Optimizing with CSSO DEVELOPMENT .header { color: red; } .header { color: green; } PRODUCTION .header { color: green; } 54
- 56. Recently in BEM world
- 57. The evolution of BEM by Max Shirshin and Vitaly Harisov bit.ly/bem-history 57
- 58. Several block libraries • common library of 100+ blocks • distinct libraries – search services – map services – image services ... 58
- 59. 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
- 60. Any library needs... • web site – documentation – block examples • release workflow – changelogs – unit tests 60
- 61. Docs generating tool git.io/bem-gen-doc 61
- 62. What to do with BEM? • follow recommendations – modular everything (CSS, JS, etc.) – file structure – building projects • participate • write your own libraries 62
- 64. Varvara Stepanova UI Framework Team Lead toivonen@yandex-team.ru @toivonens @bem_tw Thank you
- 65. #b_ Sunday, 24th Feb MeetUp onword.co/3002 65