Download as PDF, PPTX
Uploaded byVarya Stepanova
Maintainable Frontend Development with BEM
The document outlines maintainable frontend development using the BEM (Block, Element, Modifier) methodology, highlighting its structured approach to creating modular and reusable components. It addresses common development issues and offers solutions through a new workflow, emphasizing independent CSS blocks and a unified semantic approach. Additionally, it discusses tools and automation techniques that enhance the efficiency and performance of the development process.
More Related Content
![Bootstrap [part 2]](https://cdn.slidesharecdn.com/ss_thumbnails/javanik-170208155331-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
- 2. Maintainable Frontend Development withBEM #b_ UI Framework Team Lead Varvara Stepanova
- 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.
- 7. Usual development cycleand problems 7
- 8. Usual development cycleand problems • decomposition – every time • every change starts from zero • cannot reuse your own work 8
- 10. BEM is aworld 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 anindependent 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 haveelements 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.
- 17.
- 18. Modifiers change blocksand 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 wewant? 1. Ever-changing layout 2. No copy-paste 3. Unified semantic
- 21.
- 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 wayto 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 themethod • Yandex bit.ly/bem-riga-2012 • GitHub bit.ly/github-css • Harry Roberts inuitcss.com • OOCSS, SMACSS, etc. 26
- 27.
- 28. Each block isa 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 youneed 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 toprojects search maps market 31
- 32. Services are usingtwo block levels search maps market 32
- 33. Project file structurewith 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 fromtwo 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
- 38.
- 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 templatingsolutions 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 usingtwo block levels search maps market 44
- 45.
- 47. Breaking an interfaceinto blocks 47
- 48. Fix. Grow. Improve. • single language • blocks are easy to add/move/remove • maintainability • non-stop refactoring ;-) 48
- 49. Do we likewhat 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 withBorschik index.css @import url(blocks/header/header.css); @import url(blocks/menu/menu.css); ... _index.css .header { ... } .menu { ... } 51
- 52. JavaScript flattening withBorschik 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
- 55.
- 56. Recently in BEMworld
- 57. The evolution ofBEM 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 librariesto 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 dowith BEM? • follow recommendations – modular everything (CSS, JS, etc.) – file structure – building projects • participate • write your own libraries 62
- 63.
- 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