BEM. What you can borrow from Yandex frontend dev

1. BEM What you can borrow from Yandex frontend dev Frontend developer Varvara 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, video 5

3. Inside Yandex • 2500 developers • 150+ frontend developers 6

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; 20 21

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" selectors 28

19. Movement within a Page

20. Block is independent, if • a block has its "name" – no "id" but "classname" selectors • avoid cascade • no "tag" selectors 31

21. almost NO CASCADE when using Cascading Style Sheets 32

22. Moving within a Site

23. Pages are sets of blocks index page search page contacts page 40

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

26. CSS for every block blocks/ header.css menu.css button.css tabbed-pane.css logo.css footer.css 45

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.css 47

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" selectors 53

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/UuwZql 54

36. .menu li { 55

37. .menu li { 56

38. Menu block 57

39. Element

40. Elements 59

41. Search block 60

42. Tabbed-pane block 61

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___element 63

45. Optional elements 64

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.css 65

47. Modifier

48. Similar but different 67

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_l 70

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.css 71

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 elements 73

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 elements 75

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.css 78

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.css 79

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.css 80

62. BEM entities • Block – combined in different ways – included one into another – independent • Element • Modifier 81

63. BEM is • Methodology is a way of thinking when developing • Tools do monkey job for you • Block libraries make you develop faster and better 83

64. IE

65. Render to IE the things that are IE's HTML <html> <head>  <link rel="stylesheet" href="index.css">   </head> ... 85

66. Render to IE the things that are IE's HTML <html> <head>  <link rel="stylesheet" href="index.css">   </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.css 89

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.css 90

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 block 94

74. Dropdown block 95

75. Dropdown block 96

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

79. JavaScript for blocks blocks/ menu/ menu.css menu.js dropdown/ dropdown.css dropdown.js tabbed-pane/ tabbed-pane.css tabbed-pane.js 100

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/borschik 102

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.js 110

89. BEM tools build pages with blocks git.io/bem-tools 111

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.coffee 112

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.css 113

92. Multilingual

93. BEM tools support custom technologies blocks/ menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md 115

94. BEM tools support custom technologies blocks/ menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md tabbed-pane.xsl 116

95. Gruelling race... every day

96. BEMHTML template engine blocks/ menu/ tabbed-pane.css tabbed-pane.js tabbed-pane.md tabbed-pane.bemhtml 118

97. BEMHTML reference [RU] bit.ly/bemhtml-doc-raw 119

98. Libraries

99. Block libraries 121

100. BEM block library bit.ly/bem-bl-site 122

101. Block page and block examples 123

102. Block code on GitHub 124

103. Libraries with BEM stack git.io/bootstrap-bl git.io/jqueryui-bl git.io/modernizr-bl 125

104. Wanna try?

105. BEM-based project git.io/bem-project-stub 127

106. Dev Tools

107. Borschik — CSS & JS flattening git.io/borschik 129

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/svgo 131

110. http://bem.info 132

111. Varvara Stepanova Vladimir Varankin Frontend developers toivonen@yandex-team.ru varankinv@yandex-team.ru @toivonens @tvii @bem_tw Thank you

BEM. What you can borrow from Yandex frontend dev

Estás leyendo una previsualización.

Eche un vistazo a continuación

BEM. What you can borrow from Yandex frontend dev

Más Contenido Relacionado

Presentaciones para usted (20)

A los espectadores también les gustó (20)

Similares a BEM. What you can borrow from Yandex frontend dev (20)

Más de Varya Stepanova (8)