Your SlideShare is downloading. ×
BEM. What you can borrow from Yandex frontend dev
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

BEM. What you can borrow from Yandex frontend dev

2,408
views

Published on

Varvara Stepanova presents BEM methodology and tools. …

Varvara Stepanova presents BEM methodology and tools.

BEM stans for "Block Element Modifier".
First, it is a methodology, a way of thinking when developing web interface applicable for any technology.
Besides, BEM is a range of tools to automate developer's work and to optimase code for production.
Finnally, BEM is a bunch of interface libraries helping developers to make their work faster and better.

Informal video: https://vimeo.com/53219242


0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,408
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
11
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. BEMWhat you can borrow fromYandex frontend devFrontend developerVarvara Stepanova
  • 2. Over 80 services • search – web pages – images, video – goods, news, blog posts, people • web mail • web maps – traffic jams, wiki maps, taxi • hosting and sharing – files, photos, video5
  • 3. Inside Yandex • 2500 developers • 150+ frontend developers6
  • 4. Dark side of the Force
  • 5. Programming is a team work
  • 6. Developers community
  • 7. We do enjoy sharing
  • 8. Web Interface
  • 9. Behind the page HTML <!DOCTYPE html> <html> <head>...</head> <body> ... </body> CSS body { font: 0.8em Arial, sans-serif; margin: 0; color: black; } .sidebar ul li {13
  • 10. Block
  • 11. Menu block HTML <ul class="menu"> <li><a href="/new">New titiles</a></li> <li><a href="/soon">Coming soon</a></li> <li><a href="/best">Bestsellers</a></li> ... CSS .menu { list-style: none;20
  • 12. Search block HTML <div class="search"> <input type="text" name="search" value="..."/> <input type="button" name="sbmt" value="Search"/> </div> CSS .search { padding: 2em 0;2021
  • 13. Tabbed pane block HTML <div class="tabbed-pane"> <ul> <li>Bestsellers</li><li>...</li> </ul> <div> The Casual Vacancy, J.K. Rowling </div> </div> CSS .tabbed-pane { margin: 0.5em; ... }22
  • 14. INDEPENDENT
  • 15. The page of blocks index.html <!DOCTYPE html> <html> <head>..</head> <body> <div class="head"> <div class="logo">...</div> <ul class="menu">...</ul> <div class="search">...</div> </div> <div class="layout">...</div> <div class="foot">...</div> </body> </html>24
  • 16. Repeating
  • 17. Menu block HTML HTML <ul id="menu"> <ul class="menu"> ... ... CSS CSS #menu { .menu { ... ...27
  • 18. Block is independent, if • a block has its "name" – no "id" but "classname" selectors • avoids cascade • no "tag" selectors28
  • 19. Movement within a Page
  • 20. Block is independent, if • a block has its "name" – no "id" but "classname" selectors • avoid cascade • no "tag" selectors31
  • 21. almost NO CASCADE when using Cascading Style Sheets32
  • 22. Moving within a Site
  • 23. Pages are sets of blocks index page search page contacts page40
  • 24. CSS for different pages common.css index.css style.css contacts.css body { ... } body { { } .advert... ... } body .phone { .head { .. } ... .head { ... } .head ul li { ... .layout .books} { } a:link, ... { ... } ... .head ul li { .advert { ... } } .phone a { ... .layout .books { ... } ... } body .phone { ... } } .phone a { ... } a:link, ... { #map { ... } #map { } }41
  • 25. Pages are sets of blocks index page search page contacts page44
  • 26. CSS for every block blocks/ header.css menu.css button.css tabbed-pane.css logo.css footer.css45
  • 27. CSS for a page index.css @import url(blocks/header.css); @import url(blocks/menu.css); @import url(blocks/tabbed-pane.css); @import url(blocks/text.css); @import url(blocks/logo.css); @import url(blocks/footer.css); ...46
  • 28. Project file system blocks/ pages/ advert.css index.html books-list.css index.css head.css foot.css contacts.html logo.css contacts.css menu.css search.css book.html tabbed-pane.css book.css47
  • 29. WE NEED TO GO DEEPER
  • 30. Inside a Block
  • 31. Menu block HTML <ul class="menu"> <li><a href="/new">New titles</a></li> <li><a href="/soon">Coming soon</a></li> <li><a href="/best">Bestsellers</a></li> ... </ul>50
  • 32. Menu block blocks/menu.css .menu li { list-style: none; display: inline-block; padding: 0 0.5em; }51
  • 33. Menu and Dropdown blocks blocks/menu.css pages/index.html .menu li <li> { <a href="#">Bestsellers</a> list-style: none; <div class="dropdown"> display: inline-block; padding: 0 0.5em; <ul> } <li>Item One</li> <li>Item Two</li> <li>The best item</li> <li>Item Three</li>52
  • 34. Block is independent, if • a block has its "name" – no "id" but "classname" selectors • avoid cascade • no "tag" selectors53
  • 35. 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/UuwZql54
  • 36. .menu li {55
  • 37. .menu li {56
  • 38. Menu block57
  • 39. Element
  • 40. Elements59
  • 41. Search block60
  • 42. Tabbed-pane block61
  • 43. Menu page.html <ul class="menu"> <li class="menu__item"><a href="/">Index</a></li> <li class="menu__item"><a href="/new">New</a></li> <li class="menu__item"><a href="/offer">Special offer</a></li> <li class="menu__item"><a href="/shipping">Shipping</a></li> </ul>62
  • 44. Menu blocks/menu.css .menu li .tabbed-pane__tab { list-style: none; display: inline-block; .block-element padding: 0 0.5em; .block--element } .block___element63
  • 45. Optional elements64
  • 46. Files for elements blocks/ search.css menu.css search__checkbox.css menu__item.css search__autocomlete.css tabbed-pane.css book.css tabbed-pane__tab.css book__title.css tabbed-pane__pane.css book__image.css65
  • 47. Modifier
  • 48. Similar but different67
  • 49. Modifier HTML <div class="tabbed-pane tabbed-pane_theme_blue"> <ul> <li class="tabbed-pane__tab">Tab 1</li> <li class="tabbed-pane__tab">Tab 2</li> </ul> <div class="tabbed-pane__pane"> ... </div> </div>68
  • 50. Modifier HTML <div class="tabbed-pane tabbed-pane_theme_blue tabbed-pane_direction_bottom"> ... </div> <input class="button button_theme_black button_size_l" ... />69
  • 51. block-name_mod-name_mod-val tabbed-pane_theme_blue tabbed-pane_theme_white tabbed-pane_size_s tabbed-pane_size_l button_size_s button_size_l70
  • 52. Block files structure blocks/ tabbed-pane.css tabbed-pane__tab.css tabbed-pane__pane.css tabbed-pane_theme_blue.css tabbed-pane_theme_black.css tabbed-pane_direction_bottom.css71
  • 53. Taken when necessary 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__pane.css); @import url(blocks/tabbed-pane_theme_blue.css); @import url(blocks/button.css); @import url(blocks/logo.css); @import url(blocks/footer.css);72
  • 54. Modifiers for elements73
  • 55. Taken when necessary CSS <div class="tabbed-pane"> <span class=" tabbed-pane__tab tabbed-pane__tab_state_current">...</span> </div>74
  • 56. Block modifier DO affects elements75
  • 57. Cascade is possible CSS .tabbed-pane_theme_blue .tabbed-pane__tab { background-color: #9CF; }76
  • 58. Block File Structure
  • 59. File structure. The flat case blocks/ tabbed-pane.css logo.css tabbed-pane__tab.css tabbed-pane__pane.css search.css tabbed-pane_theme_blue.css search__checkbox.css tabbed-pane_theme_black.css search__autocomplete.css tabbed-pane_size_l.css tabbed-pane_size_s.css menu.css menu__item.css menu_size_l.css menu_size_s.css78
  • 60. File structure. Block folder blocks/ tabbed-pane/ menu/ tabbed-pane.css menu.css tabbed-pane__tab.css menu__item.css tabbed-pane__pane.css menu_size_l.css tabbed-pane_theme_blue.css menu_size_s.css tabbed-pane_theme_black.css tabbed-pane_size_l.css tabbed-pane_size_s.css search/ search.css logo/ search__checkbox.css logo.css search__autocomplete.css79
  • 61. File structure. Yandex way blocks/ tabbed-pane/ __tab/ _state/ tabbed-pane__tab_state_current.css tabbed-pane__tab.css __pane/ tabbed-pane__pane.css _theme/ tabbed-pane_theme_blue.css tabbed-pane_theme_black.css tabbed-pane.css80
  • 62. BEM entities • Block – combined in different ways – included one into another – independent • Element • Modifier81
  • 63. BEM is • Methodology is a way of thinking when developing • Tools do monkey job for you • Block libraries make you develop faster and better83
  • 64. IE
  • 65. Render to IE the things that are IEs HTML <html> <head> <!--[if gt IE 7]><!--> <link rel="stylesheet" href="index.css"> <!--<![endif]--> <!--[if lt IE 8]> <link rel=stylesheet href="index.ie.css"> <![endif]--> </head> ...85
  • 66. Render to IE the things that are IEs HTML <html> <head> <!--[if gt IE 7]><!--> <link rel="stylesheet" href="index.css"> <!--<![endif]--> <!--[if lt IE 8]> <link rel=stylesheet href="index.ie.css"> <![endif]--> </head> ...86
  • 67. CSS file for IE CSS @import url(index.css); @import url(blocks/menu/menu.ie.css); @import url(blocks/button/button.ie.css); @import url(blocks/footer/footer.ie.css);87
  • 68. CSS file for IE CSS @import url(index.css); @import url(blocks/menu/menu.ie.css); @import url(blocks/button/button.ie.css); @import url(blocks/footer/footer.ie.css);88
  • 69. Block files for IE blocks/ tabbed-pane/ tabbed-pane.css tabbed-pane.ie.css ... menu/ menu.css menu.ie.css89
  • 70. Element files for IE blocks/ tabbed-pane/ tabbed-pane.css tabbed-pane.ie.css tabbed-pane__item.css tabbed-pane__item.ie.css tabbed-pane_theme_blue.css tabbed-pane_theme_blue.ie.css90
  • 71. Block encapsulates all index.css blocks/ menu/ @import... menu__item.css @import... menu__item.ie.css @import... menu.css @import... menu.ie.css @import... @import... index.ie.css @import... @import... @import... @import... @import... @import...91
  • 72. JavaScript
  • 73. Tabbed-pane block94
  • 74. Dropdown block95
  • 75. Dropdown block96
  • 76. Page with JavaScript index.html <!DOCTYPE html> <html> <head> <link rel=stylesheet href="index.css"> <script type="text/javascript" src="all.js"/> </head> ...97
  • 77. Page with JavaScript index.html <!DOCTYPE html> <html> <head> <link rel=stylesheet href="index.css"> <script type="text/javascript" src="index.js"/> </head> ...98
  • 78. Pages are sets of blocks index page search page contacts page99
  • 79. JavaScript for blocks blocks/ menu/ menu.css menu.js dropdown/ dropdown.css dropdown.js tabbed-pane/ tabbed-pane.css tabbed-pane.js100
  • 80. Page JavaScript of blocks 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)101
  • 81. Borschik — CSS&JS flattening git.io/borschik102
  • 82. CSS flatenning index.css @import url(blocks/header.css); @import url(blocks/menu.css); ... _index.css .header { ... } .menu { ... }103
  • 83. Relative paths in CSS pages/index.css blocks/menu/menu.css @import url(blocks/menu/menu.css); .menu { background: url(menu__bg.png); } pages/_index.css .menu { background: url(../blocks/menu/menu__bg.png); }104
  • 84. general CSS HTML @import url(blocks/head/head.css); <!DOCTYPE html> @import url(blocks/search/search.css); <html> @import url(blocks/layout/layout.css); <head> @import url(blocks/menu/menu.css); <title>Awesome online bookshop</title> url(blocks/text/text.css); @import <link rel="stylesheet" href="style.css"/> @import url(blocks/foot/foot.css); <script type="text/javascript" src="magic.js"></script> </head> <body> CSS for IE <div class="head"> <ul class="menu"> @import url(index.css); <li class="menu__item"><a href="/">Home</a></li> @import url(blocks/menu/menu.ie.css); <li class="menu__item"><a href="/news">News</a></li> url(blocks/text/text.ie.css); @import ... @import url(blocks/foot/foot.ie.css); </ul> JavaScript <div class="phone">+3 71 1234567</div> </div> (function($){ <div class="layout"> ... $(.menu__item).on(click, function() { </div> </body> $(this).toggleClass(menu__item_state_current); </html> }); })(jQuery)105
  • 85. Building Page Files
  • 86. Page declaration index.xml <b:page> <b:head> <b:logo/> <b:search> <e:input/> <e:button/> </b-search> <b:menu> <e:item>Home</e:item> <e:item>Contacts</e:item> ...108
  • 87. Page declaration. BEM tree index.bemjson { block: page, content: [ { block: head, content: [ { block: logo }, { block: search, ....109
  • 88. Change BEM tree if you need changes } page.html page.css page.js110
  • 89. BEM tools build pages with blocks git.io/bem-tools111
  • 90. BEM tools support many technologies blocks/ pages/ menu/ index.html menu.sass index.sass -> index.css menu.less index.coffee -> index.js menu.coffee tabbed-pane/ tabbed-pane.sass tabbed-pane.coffee112
  • 91. BEM tools support any file structure blocks/ blocks/ menu.css menu/ menu_theme_black.css __item/ menu_theme_blue.css menu__item.css menu_size_l.css _theme/ menu_size_s.css menu_theme_black.css menu-item.css menu_theme_blue.css menu-item_state_current.css _size/ menu_size_l.css tabbed-pane.css menu_size_s.css tabbed-pane_theme_black.css menu.css tabbed-pane_theme_blue.css tabbedpane-item.css tabbed-pane/ tabbedpane-pane.css logo/ logo.css113
  • 92. Multilingual
  • 93. BEM tools support custom technologies blocks/ menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md115
  • 94. BEM tools support custom technologies blocks/ menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md tabbed-pane.xsl116
  • 95. Gruelling race... every day
  • 96. BEMHTML template engine blocks/ menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md tabbed-pane.bemhtml118
  • 97. BEMHTML reference [RU] bit.ly/bemhtml-doc-raw119
  • 98. Libraries
  • 99. Block libraries121
  • 100. BEM block library bit.ly/bem-bl-site122
  • 101. Block page and block examples123
  • 102. Block code on GitHub124
  • 103. Libraries with BEM stack git.io/bootstrap-bl git.io/jqueryui-bl git.io/modernizr-bl125
  • 104. Wanna try?
  • 105. BEM-based project git.io/bem-project-stub127
  • 106. Dev Tools
  • 107. Borschik — CSS & JS flattening git.io/borschik129
  • 108. CSS Optimizer BEFORE AFTER .test1 { .test1, .test2 { border: none; border: none background-color: red; } bem.info/tools/csso } .test1, .test3 { .test2 { background-color: #F00; border: none } } .test3 { background-color: #FF000; }130
  • 109. SVG Optimizer git.io/svgo131
  • 110. http://bem.info132
  • 111. Varvara Stepanova Vladimir Varankin Frontend developers toivonen@yandex-team.ru varankinv@yandex-team.ru @toivonens @tvii @bem_twThank you

×