1. - , , BEMup , 17 2014

2. 3 3 bit.ly/bemup-msk-workshop 3. 4 4 sipayrt@yandex-team.ru @sipayrt github.com/sipayrt 4. 5 dmtry@yandex-team.ru @dabelitsky github.com/dab 5. 6 6 einstain@yandex-team.ru @aristov7 github.com/aristov 6. ? 7 CSS 7. ? 8 CSS 8. ? 9 CSS JavaScript + BEM 9. ? 10 CSS JavaScript + BEM - 10. - 11. ?! 12 API , , . . 12. 13 13. CSS + 14. ? 15. ? 16 16. ? 17 , 17. ? 18 , , 18. ? 19 bem.info bit.ly/1hMHNB2 - bit.ly/1hMCKk5 19. 20. 21 #menu li! {! font-size: 16px;! } 21. 22

! !!!!

! !!!!

! !!!!!!!!! !!!!!

22. 23

! !!!!

! !!!!

! !!!!!!!!! !!!!!

23. 24. 25 .b-header .link! {! background: no-repeat url(b-logo.svg);! }! ! 25. 26 26. 27 .b-header .link! {! background: no-repeat url(b-logo.svg);! }! ! .b-header .b-social .link! {! color: green;! }! 27. 28 28. 29 /* */! .b-header .link! {! background: url();! }! ! .b-header .b-social .link! {! color: #fff;! }! 29. 30 /* */! .b-header .link! {! background: url();! }! ! .b-header .b-social .link! {! color: #fff;! }! /* */! .header__link! {! background: url();! }! ! .social__link! {! color: #fff;! } 30. 31 31. 32 32. 33 33. 34 34. 35 35. 36 36. 37 37. 38 .cat_theme_red! {! background: #dc9d42;! }! 38. 39 .cat_theme_red! {! background: #dc9d42;! }! ! .cat_walking! {! animation-duration: 300s;! }! ! 39. 40 .cat_theme_red! {! background: #dc9d42;! }! ! .cat_walking! {! animation-duration: 300s;! }! ! .cat__tail_direction_top! {! top: -200px;! }! 40. 41 41. 42. 43 43. 44 blocks/! ! ! button.css! !button.js! ! ! input.css! ! ! input.js! ! ! input.html! ! ! logo.css! ! ! logo.js! ! ! logo.png 44. 45 blocks/! ! header/! ! logo/! ! button/! !! __icon/! ! ! ! ! ! button__icon.bemhtml! ! ! ! ! ! button__icon.css! ! ! ! ! ! button__icon.png! _size/! ! ! button_size_s.css! !! ! button_size_m.css! !! button.css! !! button.js 45. 46 blocks/! ! header/! ! logo/! ! button/! !! __icon/! ! ! ! ! ! button__icon.bemhtml! ! ! ! ! ! button__icon.css! ! ! ! ! ! button__icon.png! _size/! ! ! button_size_s.css! !! ! button_size_m.css! !! button.css! !! button.js 46. 47 blocks/! ! header/! ! logo/! ! button/! !! __icon/! ! ! ! ! ! button__icon.bemhtml! ! ! ! ! ! button__icon.css! ! ! ! ! ! button__icon.png! _size/! ! ! button_size_s.css! !! ! button_size_m.css! !! button.css! !! button.js 47. 48 blocks/! ! header/! ! logo/! ! button/! !! __icon/! ! ! ! ! ! button__icon.bemhtml! ! ! ! ! ! button__icon.css! ! ! ! ! ! button__icon.png! _size/! ! ! button_size_s.css! !! ! button_size_m.css! !! button.css! !! button.js 48. 49 @import url(../../lego/button/button.css);! @import url(../../lego/button/__icon/button__icon.css);! @import url(../../lego/button/_size/button_size.css);! ! 49. 50 @import url(../../lego/button/button.css);! @import url(../../lego/button/_size/button_size.css);! ! 50. 51 bem.info bit.ly/1eAsQBo 51. 52 52. 53 53. 54 ! ! ! bem-components! !!!!desktop.blocks/! !!!!!!!!form/! !!!!!!!!!!!!form.css 54. 55 ! ! bem-components/! !!!!desktop.blocks/! !!!!!!!!form/! !!!!!!!!!!!!form.css! sssr/! !!!!desktop.blocks/! !!!!!!!!form/! !!!!!!!!!!!!form.css 55. 56 @import url(../../bem-components/desktop.blocks/form/form.css);! @import url(../../desktop.blocks/form/form.css);! ! 56. 57 /* ../../bem-components/desktop.blocks/form/form.css begin */! .form! {! background: #fff;! }! /* ../../bem-components/desktop.blocks/form/form.css end */! ! /* ../../desktop.blocks/form/form.css begin */! .form! {! background: ;! }! /* ../../desktop.blocks/form/form.css end */! 57. 58 58. 59 /* common.blocks */! .button! {! display: inline-block;! }! ! /* desktop.blocks */! .button! {! background-color: green;! }! ! /* touch.blocks */! .button! {! -webkit-touch-callout: none;! } 59. 60 bem.info bit.ly/1eAsQBo bit.ly/1m8ijzQ 60. 61. 62 @import url(../../common/block/global/_type/global_reset.css);! @import url(../../common/block/l-head/l-head.css);! @import url(../../common/block/header/__logo/header__logo.css);! @import url(../../common/block/header/_type/header_type_yandex.css);! @import url(../../common/block/header/__tabs/header__tabs.css);! @import url(../../common/block/b-dropdown/b-dropdown.css);! @import url(../../common/block/b-dropdown/__text/b-dropdown__text.css);! @import url(../../common/block/b-link/b-link.css);! @import url(../../common/block/dropdown/__arrow/dropdown__arrow.css);! @import url(../../common/block/header/__search/header__search.css);! @import url(../../common/block/b-search/b-search.css);! @import url(../../common/block/b-search/__input/b-search__input.css);! @import url(../../common/block/b-search/__sample/b-search__sample.css);! @import url(../../common/block/b-search/__precise/b-search__precise.css);! @import url(../../common/block/b-search/__button/b-search__button.css);! @import url(../../common/block/header/__userinfo/header__userinfo.css);! 62. 63 63. 64 64. 65 bem-tools/enb borschik CSSO + SVGO BEMHTML 65. 66 bem.info/tools bit.ly/1qL91tg 66. Lets code CSS 67. BEMHTML + BEMTREE 68. 69. 70. 71 CSS 71. 71 CSS { } 72. 71 CSS { } .menu__item { display: inline-block; } 73. XSLT 74. XSLT 73 75. XSLT 73 76. XSLT 73 - 77. XSLT 73 - 78. XSLT 74 bit.ly/vegedxslt 79. XSLT 75 80. XSLT 75 81. XSLT 75 82. XSLT 75 83. XSLT 75 84. BEMHTML 76 85. BEMHTML 76 JavaScript 86. BEMHTML 76 JavaScript BEM 87. BEMHTML 76 JavaScript BEM 88. JavaScript BEMHTML 77 89. JavaScript BEMHTML 77 (DSL), JavaScript 90. JavaScript BEMHTML 77 (DSL), JavaScript JavaScript 91. JavaScript BEMHTML 77 (DSL), JavaScript JavaScript JavaScript 92. JavaScript BEMHTML 77 (DSL), JavaScript JavaScript JavaScript 93. BEMHTML 78 94. BEMHTML 78 bit.ly/bemhtmlref 95. 79 96. 79 { } 97. 79 { } .menu__item { display: inline-block; } 98. 79 { } .menu__item { display: inline-block; } block('menu').elem('item')( tag()('li') ) 99. - HTML 80 100. BEMJSON BEMHTML HTML 81 101. BEMJSON 82 102. BEMHTML 83 103. HTML 84 104. 85 DOM- ! style = display: inline-block; background-color: silver; ! ! ! - ! BEMJSON { block: 'menu' elem: 'item', tag: li' } BEMHTML 105. BEMHTML. 86 106. BEMHTML. 86 HTML (, , ..) 107. BEMHTML. 86 HTML (, , ..) 108. BEMHTML. 86 HTML (, , ..) () 109. BEMHTML. 86 HTML (, , ..) () this.ctx 110. BEMHTML. 87 111. BEMHTML. 88 112. BEMHTML. 88 default 113. BEMHTML. 88 default tag HTML 114. BEMHTML. 88 default tag HTML js js 115. BEMHTML. 88 default tag HTML js js bem - 116. BEMHTML. 88 default tag HTML js js bem - cls 117. BEMHTML. 88 default tag HTML js js bem - cls mix - DOM- 118. BEMHTML. 88 default tag HTML js js bem - cls mix - DOM- jsAttrs HTML- js 119. BEMHTML. 88 default tag HTML js js bem - cls mix - DOM- jsAttrs HTML- js attrs HTML- 120. BEMHTML. 88 default tag HTML js js bem - cls mix - DOM- jsAttrs HTML- js attrs HTML- content HTML- 121. BEMHTML 89 122. BEMHTML 89 match(1, 2, 3)(); 123. BEMHTML 89 match(1, 2, 3)(); match( 1).match( 2) (1) match( 1).match( 3) (2) 124. BEMHTML 89 match(1, 2, 3)(); match( 1).match( 2) (1) match( 1).match( 3) (2) match(1)( match(2)(1), match(3)(2) ) 125. BEMHTML 90 126. BEMHTML 90 match(1, 2)() 127. BEMHTML 90 match(1, 2)() match(this.block === 'link', this._mode === 'tag', this.ctx.url )('a'); 128. BEMHTML 90 match(1, 2)() match(this.block === 'link', this._mode === 'tag', this.ctx.url )('a'); match(this.block === 'link') .match(this._mode === 'tag') .match(this.ctx.url)('a'); 129. - 91 130. - 91 { block: 'b-menu' } 131. - 91 { block: 'b-menu' } { elem: 'item' } 132. - 91 { block: 'b-menu' } { elem: 'item' } { block: 'b-link', mods: { pseudo: 'yes', color: 'green' } } 133. - 91 { block: 'b-menu' } { elem: 'item' } { block: 'b-link', mods: { pseudo: 'yes', color: 'green' } } { elem: 'item', elemMods: { selected: 'yes' } } 134. - 91 { block: 'b-menu' } { elem: 'item' } { block: 'b-link', mods: { pseudo: 'yes', color: 'green' } } { elem: 'item', elemMods: { selected: 'yes' } } { block: 'b-link', mix: [ { block: 'b-serp-item', elem: 'link' } ] } 135. HTML 92 136. HTML 92 { block: 'my-block', tag: 'img' } 137. HTML 92 { block: 'my-block', tag: 'img' } { block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }} 138. HTML 92 { block: 'my-block', tag: 'img' } { block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }} { block: 'my-block', cls: 'additional-class' } 139. HTML 92 { block: 'my-block', tag: 'img' } { block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }} { block: 'my-block', cls: 'additional-class' } { block: page', tag: html', bem: false } 140. HTML 92 { block: 'my-block', tag: 'img' } { block: 'my-block', tag: 'img', attrs: { src: ', alt: '' }} { block: 'my-block', cls: 'additional-class' } { block: page', tag: html', bem: false } { block: my-block', js: true } 141. 93 142. 93 { } 143. 93 { } { } 144. 93 { } { } { } 145. BEMHTML 94 146. BEMHTML 94 bit.ly/bemhtmlref 147. Lets code BEMHTML 148. 96 149. 150. 151. data BEM- HTML 99 152. data BEMJSON 100 153. 101 data priv.js BEMJSON 154. priv.js 102 JavaScript 155. priv.js ? 103 156. priv.js ? 103 157. priv.js ? 103 158. priv.js ? 103 BEMHTML 159. BEMTREE 104 160. BEMTREE 104 161. BEMTREE 104 162. BEMTREE 104 163. BEMTREE 104 c BEMHTML 164. 105 165. BEMHTML BEMTREE 106 166. BEMHTML BEMTREE 106 167. BEMHTML BEMTREE 106 BEMTREE default, content 168. BEMHTML BEMTREE 106 BEMTREE default, content , 169. BEMTREE 107 - 170. Lets code BEMTREE 171. JavaScript + 172. 110 173. bem-core github.com/bem/bem-core ! bem-components 111 174. ym github.com/ymaps/modules 112 175. BEM BEMHTML $ (jQuery) 113 176. BEM BEMHTML $ (jQuery) $.inherit $.observable 114 177. BEM BEMHTML $ (jQuery) $.inherit $.observable 115 modules 178. 116 179. 117 modules.dene('i-bem', ['inherit'], function(provide, inherit) { var BEM = inherit(/* */) provide(BEM) }) 180. 118 modules.require(['i-bem', 'jquery'], function(BEM, $) { /* , i-bem jquery */ }) 181. i-bem.js 182. i-bem.js? 120 183. i-bem.js 121 , 184. i-bem.js 122 , i-bem JavaScript 185. i-bem.js 123 , i-bem JavaScript jQuery API 186. i-bem.js? 124 187. i-bem.js 125 188. i-bem.js 126 189. i-bem.js 127 190. 128 i-bem.js? 191. i-bem.js bem-core/! ! common.blocks/! ! ! i-bem/! ! ! ! i-bem.vanilla.js! ! ! ! __dom/! ! ! ! ! i-bem__dom.js 129 192. i-bem.js 130 bem-core/! ! common.blocks/! ! ! i-bem/! ! ! ! i-bem.vanilla.js! ! ! ! __dom/! ! ! ! ! i-bem__dom.js 193. i-bem.js 131 bem-core/! ! common.blocks/! ! ! i-bem/! ! ! ! i-bem.vanilla.js! ! ! ! __dom/! ! ! ! ! i-bem__dom.js 194. JS- 195. 133 {! ! ! ! ! block: 'form'! } js- 196. 134 {! ! ! ! ! block: 'form',! ! ! ! ! js: true! } js- 197. 135 {! ! ! ! ! block: 'form',! ! ! ! ! js: { p1: 'v1', p2: 'v2', }! } js- 198. 136

js- 199. 137

js- 200. 138

js- 201. 139

js- 202. - 203. 141 BEMDOM.decl('form', {! /* */ }, {! /* */ }); 204. 142 BEMDOM.decl({! block: 'form', ! modName: 'type',! modVal: 'dialog'! }, {! /* */ }, {! /* */ }); 205. 143 BEMDOM.decl({! block: 'form', ! elem: 'control'! }, {! /* */ }, {! /* */ }); 206. 144 BEMDOM.decl({! block: 'form', ! elem: 'control',! modName: 'type', ! modVal: 'input'! }, {! /* */ }, {! /* */ }); 207. 145 BEMDOM.decl('form', {! onSetMod: {! ! ! ! ! disabled: function(modName, modVal) {! ! /* */ ! ! ! ! ! }! ! ! }! }); 208. 146 BEMDOM.decl({! block: 'dialog', ! baseBlock: 'form'! }, {! /* */ }, {! /* */ }); 209. 147 210. 148 BEMDOM.decl('form', { myMethod: function() { // this // this.__self // this.__self.myStaticMethod() // super-call this.__base() } }); 211. 149 BEMDOM.decl('form', { /* */ }, { myStaticMethod: function() { // this // super-call this.__base() } }); 212. 213. 151 214. 152 215. 153 216. 154 DOM- 217. 155 // this.findBlockInside('button') this.findBlockOutside('page') this.findBlockOn('dialog') 218. 156 // this.findBlockInside('button') this.findBlockOutside('page') this.findBlockOn('dialog') ! // this.findElem('control') this.elem('control') 219. 157 // this.findBlockInside('button') this.findBlockOutside('page') this.findBlockOn('dialog') ! // this.findElem('control') this.elem('control') ! // this.setMod('status', 'loading') this.hasMod('status', 'loading') this.getMod('status') this.delMod('status') 220. 158 DOM- 221. 159 DOM- BEM- 222. 160 DOM- BEM- 223. 161 DOM- BEM- 224. 162 // DOM- this.bindTo('submit', function() { /* */ }) this.unbindFrom('submit') 225. 163 // DOM- this.bindTo('submit', function() { /**/ }) this.unbindFrom('submit') ! // BEM- this.on('update', function() { /**/ }) this.un('update', function() { /**/ }) this.emit('update') 226. 227. 165

228. 166

229. 167

230. 168 BEMDOM.decl('form', {! onSetMod: {! ! ! ! ! js: {! ! ! inited: function() {! /* */ }! ! ! ! !}! ! ! }! }); 231. ! 169 232. ! 170 DOM- 233. ! 171 DOM- 234. ! 172 DOM- 235. ! 173 DOM- 236. Lets code! JavaScript 237. 175 238. 176 ^_^ -, project-stub bem-core bem-components bem-tools i-bem.js, BEMHTML, BEMTREE 239. 177 info@bem.info @bem_ru @bem_en #b_ clubs.ya.ru/bem ! ___ groups/ bem 240. 178 bit.ly/msk-bemup-feedback 241. 179 sipayrt@yandex-team.ru dmtry@yandex-team.ru einstain@yandex-team.ru clubs.ya.ru/bem twitter.com/bem_ru facebook.com/groups/bem.info bem.info