БЭМВладимир ВаранкинРазработчик интерфейсов
Блок    Элемент    Модификатор3
Проекты в Яндексе    •   Живут долго    •   Делаются быстро    •   Легко поддерживаются и развиваются    •   Большая коман...
Методология
Методология — учение об организации    деятельности6
МетодологияПринципы БЭМ-методологии
Принципы БЭМ-методологии    • разделение кода на части8
Принципы БЭМ-методологии    • разделение кода на части    • общая предметная область9
Общая предметная область10
Общая предметная область11
Общая предметная область12
Общая предметная область13
Общая предметная область14
Общая предметная область15
Принципы БЭМ-методологии     • разделение кода на части     • общая предметная область     • разделение ответственности16
Принципы БЭМ-методологии     •   разделение кода на части     •   общая предметная область     •   разделение ответственно...
Принципы БЭМ-методологии     •   разделение кода на части     •   общая предметная область     •   разделение ответственно...
Определения
Блок20
Блок21
Блок22
Блок23
Элемент24
Элемент25
Элемент26
Модификатор27
Модификатор28
Уровень     переопределения29
Уровень переопределения30
Сборка31
Пример
ПримерКарточка товара
Блок35
Элементы36
ПримерБЭМ-дерево
БЭМ-дерево38
<block name="product">         <elem name="title">             Световой меч...</elem>         <elem name="picture"        ...
ПримерОрганизацияфайловой структуры
blocks/      └── product/41
blocks/      └── product/           └── product.css42
Технология43
blocks/      └── product/           ├── product.bemhtml           ├── product.png           ├── product.js           └── p...
/* product.css */     .product     {         color: #000;         font: 13px Verdana, sans-serif;     }45
blocks/      └─ product/          ├─ title/          ├─ picture/          ├─ price/          ├─ price-value/          ├─ ....
blocks/      └─ product/          ├─ title/              └─ product__title.css          ├─ picture/              └─ produc...
Файлы → БЭМ-дерево48
/* product__title.css */     .product__title     {         display: block;         font-size: 24px;         font-weight: b...
blocks/      └─ product/          ├─ title/          ├─ picture/          ├─ price/          ├─ price-value/          ├─ ....
/* product__price.css */     .product__price     {         font-size: 12px;     }     .product__price-value     {         ...
<html>     <body>     <div class="product">         <h1 class="product__title">...</h1>         <img class="product__pictu...
ПримерПришел менеджер...
Пришел менеджер54
Пришел менеджер55
56
57
Блок58
Элементы59
ПримерБЭМ-дерево
<block name="product">         <elem name="title">             Световой меч...</elem>         <elem name="picture">       ...
ПримерФайловая структура
blocks/      ├─ product/      └─ illustration/63
blocks/      ├─ product/      └─ illustration/         ├─ image/             └─ illustration__image.css         └─ zoom/  ...
blocks/      ├─ product/      └─ illustration/          ├─ image/              ├─ _size/                   ├─ illustration...
66
blocks/      ├─ product/      └─ illustration/          ├─ image/              ├─ _size/                   ├─ illustration...
/* illustration__image_size_mid.css */     . illustration__image_size_mid     {         display: block;         width: 300...
blocks/      ├─ product/      └─ illustration/         ├─ image/             └─ ...         ├─ zoom/             └─ ...   ...
// illustration.js     (function($, undefined) {     $(.illustration__zoom).on(click, function() {          var sizeBig = ...
<html>     <body>     <div class="product">       <h1 class="product__title">...</h1>       <div class="product__picture i...
<html>     <body>     <div class="product">       <h1 class="product__title">...</h1>       <div class="product__picture i...
<html>     <body>     <div class="product">       <h1 class="product__title">...</h1>       <div class="product__picture i...
Утилиты
github.com/bem/bem-tools75
BEM tools     Утилита для работы с файлами, написанными по БЭМ-методу     github.com/bem/bem-tools76
BEM tools     Создание сущностей     Сборка финального runtime     Разработческий сервер     ...77
BEM tools     › bem --help78
BEM tools     › bem --help     Tools to work with files written using the BEM-method.     See http://bem.github.com/bem-me...
BEM tools     › bem --help     Tools to work with files written using the BEM-method.     See http://bem.github.com/bem-me...
BEM Toolsbem create:создание БЭМ-сущностей
bem create     –   уровни переопределения     –   блоки     –   элементы     –   модификаторы82
bem create     › bem create --help83
bem create     › bem create --help     Usage:       bem create COMMAND [OPTIONS] [ARGS]       bem create [OPTIONS] [ARGS] ...
bem create     › bem create block --help85
bem create     › bem create block --help     Usage:       bem create block [OPTIONS] [ARGS]     Options:       -h, --help ...
bem create     › bem create block illustration --level=blocks --add-tech=css87
bem create     › bem create block illustration --level=blocks --add-tech=css     blocks/       └─ illustration/           ...
bem create     › bem create mod size --level=blocks                          --block=illustration                         ...
bem create     › bem create mod size --level=blocks                          --block=illustration                         ...
BEM Toolsbem build:сборка файлов страниц
bem build     Собирает файлы страниц в различных технологиях,     основываясь на декларации.92
bem build     › bem build --help93
bem build         БЭМ дерево ⟹ Декларация ⟹ Страница94
bem build     › bem build [...] -o pages/index -n index                       --tech=css                      --level=bloc...
bem build     › bem build [...] -o pages/index -n index                       --tech=css                       --level=blo...
/* index.css */     @import   url(blocks/product/product.css);     @import   url(blocks/product/title/...);     @import   ...
bem build     › bem build [...] -o pages/index -n index                       --tech=js                       --level=bloc...
bem build     › bem build [...] -o pages/index -n index                       --tech=js                       --level=bloc...
/* index.js */      /*borschik:include:blocks/product/product.js*/      /*borschik:include:blocks/product/title/...*/     ...
bem build      pages/        └─ index/             ├─ index.html             ├─ index.xsl             ├─ index.bemhtml.js ...
bem build      pages/        └─ index/             ├─ index.html             ├─ index.xsl             ├─ index.bemhtml.js ...
ПримерПришел менеджер...
Пришел менеджер104
Пришел менеджер105
Пришел менеджер106
Пришел менеджер...107
ПримерБЭМ-дерево
<block name="product">          <elem name="title">              Световой меч...</elem>          <elem name="picture">    ...
„Заказывать товары можно       только             с   некоторых страниц                       o_O`110
ПримерФайловая структура
› bem create level blocks-store112
blocks/       ├─ product/       └─ illustration/      blocks-store/113
blocks/       ├─ product/       └─ illustration/      blocks-store/       └─ product/114
blocks/       ├─ product/       └─ illustration/      blocks-store/       └─ product/           ├─ product.bemhtml        ...
blocks/       ├─ product/       └─ illustration/      blocks-store/       └─ product/           ├─ order-btn/             ...
117
blocks/       ├─ product/       └─ illustration/      blocks-store/       ├─ product/           ├─ order-btn/           └─...
› bem build [...] -o pages/store -n store                        --tech=sass                        --tech=js             ...
› bem build [...] -o pages/store -n store                        --tech=sass                        --tech=js             ...
pages/       ├─ index/       └─ store/           ├─ store.html           ├─ store.css           ├─ store.sass           └─...
/* store.sass */      @import   url(blocks/product/product.css);      @import   url(blocks-store/product/product.sass);   ...
Что-то еще?
124
125
126
127
Материалы
Материалы      bem.info      github.com/bem129
Владимир ВаранкинРазработчик интерфейсовvarankinv@yandex-team.rugithub.com/narqo
Владимир Варанкин — «БЭМ»
Владимир Варанкин — «БЭМ»
Upcoming SlideShare
Loading in …5
×

Владимир Варанкин — «БЭМ»

8,357 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,357
On SlideShare
0
From Embeds
0
Number of Embeds
7,618
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Владимир Варанкин — «БЭМ»

  1. 1. БЭМВладимир ВаранкинРазработчик интерфейсов
  2. 2. Блок Элемент Модификатор3
  3. 3. Проекты в Яндексе • Живут долго • Делаются быстро • Легко поддерживаются и развиваются • Большая команда • Много кода4
  4. 4. Методология
  5. 5. Методология — учение об организации деятельности6
  6. 6. МетодологияПринципы БЭМ-методологии
  7. 7. Принципы БЭМ-методологии • разделение кода на части8
  8. 8. Принципы БЭМ-методологии • разделение кода на части • общая предметная область9
  9. 9. Общая предметная область10
  10. 10. Общая предметная область11
  11. 11. Общая предметная область12
  12. 12. Общая предметная область13
  13. 13. Общая предметная область14
  14. 14. Общая предметная область15
  15. 15. Принципы БЭМ-методологии • разделение кода на части • общая предметная область • разделение ответственности16
  16. 16. Принципы БЭМ-методологии • разделение кода на части • общая предметная область • разделение ответственности • повторное использование кода17
  17. 17. Принципы БЭМ-методологии • разделение кода на части • общая предметная область • разделение ответственности • повторное использование кода • сборка кода в финальный runtime18
  18. 18. Определения
  19. 19. Блок20
  20. 20. Блок21
  21. 21. Блок22
  22. 22. Блок23
  23. 23. Элемент24
  24. 24. Элемент25
  25. 25. Элемент26
  26. 26. Модификатор27
  27. 27. Модификатор28
  28. 28. Уровень переопределения29
  29. 29. Уровень переопределения30
  30. 30. Сборка31
  31. 31. Пример
  32. 32. ПримерКарточка товара
  33. 33. Блок35
  34. 34. Элементы36
  35. 35. ПримерБЭМ-дерево
  36. 36. БЭМ-дерево38
  37. 37. <block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture" src="n52-105-medium.png"/> <elem name="price"> <elem name="price-value" value="33700"/> </elem> <elem name="info"> Хорошо держит форму...</elem> ...39
  38. 38. ПримерОрганизацияфайловой структуры
  39. 39. blocks/ └── product/41
  40. 40. blocks/ └── product/ └── product.css42
  41. 41. Технология43
  42. 42. blocks/ └── product/ ├── product.bemhtml ├── product.png ├── product.js └── product.css44
  43. 43. /* product.css */ .product { color: #000; font: 13px Verdana, sans-serif; }45
  44. 44. blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css46
  45. 45. blocks/ └─ product/ ├─ title/ └─ product__title.css ├─ picture/ └─ product__picture.css ├─ ... └─ product.css47
  46. 46. Файлы → БЭМ-дерево48
  47. 47. /* product__title.css */ .product__title { display: block; font-size: 24px; font-weight: bold; margin-left: -1ex; }49
  48. 48. blocks/ └─ product/ ├─ title/ ├─ picture/ ├─ price/ ├─ price-value/ ├─ ... └─ product.css50
  49. 49. /* product__price.css */ .product__price { font-size: 12px; } .product__price-value { color: #390; font-size: 24px; }51
  50. 50. <html> <body> <div class="product"> <h1 class="product__title">...</h1> <img class="product__picture" src="..."/> <span class="product__price">...</span> <!-- ... --> </div> </body> </html>52
  51. 51. ПримерПришел менеджер...
  52. 52. Пришел менеджер54
  53. 53. Пришел менеджер55
  54. 54. 56
  55. 55. 57
  56. 56. Блок58
  57. 57. Элементы59
  58. 58. ПримерБЭМ-дерево
  59. 59. <block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture"> <block name="illustration"> <elem name="image" size="mid" src="n52-105-medium.png"/> <elem name="zoom"> Большое изображение</elem></block> <elem name="price"> <elem name="price-value" value="33700"/><elem> <elem name="info"> Хорошо держит форму...</elem> ...61
  60. 60. ПримерФайловая структура
  61. 61. blocks/ ├─ product/ └─ illustration/63
  62. 62. blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ illustration__image.css └─ zoom/ ├─ illustration__zoom.css └─ illustration__zoom.png64
  63. 63. blocks/ ├─ product/ └─ illustration/ ├─ image/ ├─ _size/ ├─ illustration__image_size_sm.css ├─ illustration__image_size_mid.css └─ illustration__image_size_big.css └─ illustration__image.css └─ zoom/ └─ ...65
  64. 64. 66
  65. 65. blocks/ ├─ product/ └─ illustration/ ├─ image/ ├─ _size/ ├─ illustration__image_size_sm.css ├─ illustration__image_size_mid.css ├─ illustration__image_size_big.css └─ illustration__image_size_big.png └─ illustration__image.css └─ zoom/ └─ ...67
  66. 66. /* illustration__image_size_mid.css */ . illustration__image_size_mid { display: block; width: 300px; }68
  67. 67. blocks/ ├─ product/ └─ illustration/ ├─ image/ └─ ... ├─ zoom/ └─ ... └─ illustration.js69
  68. 68. // illustration.js (function($, undefined) { $(.illustration__zoom).on(click, function() { var sizeBig = $(this).data(size-big); // ... }) }(jQuery));70
  69. 69. <html> <body> <div class="product"> <h1 class="product__title">...</h1> <div class="product__picture illustration"> <img class="illustration__image illustration__image_size_mid" src="..."/> <span class="illustration__zoom" data-size-big="...">...</span> </div> <span class="product__price">...</span> <!-- ... --> </div> </body> </html>71
  70. 70. <html> <body> <div class="product"> <h1 class="product__title">...</h1> <div class="product__picture illustration"> <img class="illustration__image illustration__image_size_mid" src="..."/> <span class="illustration__zoom" data-size-big="...">...</span> </div> <span class="product__price">...</span> <!-- ... --> </div> </body> </html>72
  71. 71. <html> <body> <div class="product"> <h1 class="product__title">...</h1> <div class="product__picture illustration"> <img class="illustration__image illustration__image_size_mid" src="..."/> <span class="illustration__zoom" data-size-big="...">...</span> </div> <span class="product__price">...</span> events.yandex.ru/talks/293 <!-- ... --> </div> </body> </html>73
  72. 72. Утилиты
  73. 73. github.com/bem/bem-tools75
  74. 74. BEM tools Утилита для работы с файлами, написанными по БЭМ-методу github.com/bem/bem-tools76
  75. 75. BEM tools Создание сущностей Сборка финального runtime Разработческий сервер ...77
  76. 76. BEM tools › bem --help78
  77. 77. BEM tools › bem --help Tools to work with files written using the BEM-method. See http://bem.github.com/bem-method/ for more info. Usage: bem COMMAND [OPTIONS] [ARGS] bem [OPTIONS] [ARGS] Commands: create : Create of entities tool. build : Build tool. server : Development server. make : BEM make. decl : Usage declaration manipulation tool.79 completion : Shell completion.
  78. 78. BEM tools › bem --help Tools to work with files written using the BEM-method. See http://bem.github.com/bem-method/ for more info. Usage: bem COMMAND [OPTIONS] [ARGS] bem [OPTIONS] [ARGS] Commands: create : Create of entities tool. build : Build tool. server : Development server. make : BEM make. decl : Usage declaration manipulation tool.80 completion : Shell completion.
  79. 79. BEM Toolsbem create:создание БЭМ-сущностей
  80. 80. bem create – уровни переопределения – блоки – элементы – модификаторы82
  81. 81. bem create › bem create --help83
  82. 82. bem create › bem create --help Usage: bem create COMMAND [OPTIONS] [ARGS] bem create [OPTIONS] [ARGS] Commands: level : Level. block : Block. elem : Block element. mod : Modifier.84
  83. 83. bem create › bem create block --help85
  84. 84. bem create › bem create block --help Usage: bem create block [OPTIONS] [ARGS] Options: -h, --help : Help -C DIR, --chdir=DIR : change process working directory, cwd by default; to specify level use --level, -l option instead -t ADDTECH, --add-tech=ADDTECH : add tech -T FORCETECH, --force-tech=FORCETECH : use only specified tech -n NOTECH, --no-tech=NOTECH : exclude tech -l LEVEL, --level=LEVEL : level directory path, default: ./ -f, --force : force files creation Arguments: NAMES : blocks names86
  85. 85. bem create › bem create block illustration --level=blocks --add-tech=css87
  86. 86. bem create › bem create block illustration --level=blocks --add-tech=css blocks/ └─ illustration/ └─ illustration.css88
  87. 87. bem create › bem create mod size --level=blocks --block=illustration --elem=image --val=mid --add-tech=css89
  88. 88. bem create › bem create mod size --level=blocks --block=illustration --elem=image --val=mid --add-tech=css blocks/ └─ illustration/ └─ image/ └─ _size/ └─ illustration__image_size_mid.css90
  89. 89. BEM Toolsbem build:сборка файлов страниц
  90. 90. bem build Собирает файлы страниц в различных технологиях, основываясь на декларации.92
  91. 91. bem build › bem build --help93
  92. 92. bem build БЭМ дерево ⟹ Декларация ⟹ Страница94
  93. 93. bem build › bem build [...] -o pages/index -n index --tech=css --level=blocks95
  94. 94. bem build › bem build [...] -o pages/index -n index --tech=css --level=blocks pages/ └─ index/ └─ index.css96
  95. 95. /* index.css */ @import url(blocks/product/product.css); @import url(blocks/product/title/...); @import url(blocks/product/picture/...); ... @import url(blocks/illustration/figure.css); @import url(blocks/illustration/image/...); ...97
  96. 96. bem build › bem build [...] -o pages/index -n index --tech=js --level=blocks98
  97. 97. bem build › bem build [...] -o pages/index -n index --tech=js --level=blocks pages/ └─ index/ └─ index.js99
  98. 98. /* index.js */ /*borschik:include:blocks/product/product.js*/ /*borschik:include:blocks/product/title/...*/ /*borschik:include:blocks/product/picture/...*/ ... /*borschik:include:blocks/illustration/illustration.js*/ /*borschik:include:blocks/illustration/image/...*/ ...100
  99. 99. bem build pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee └─ index.ts101
  100. 100. bem build pages/ └─ index/ ├─ index.html ├─ index.xsl ├─ index.bemhtml.js ├─ index.js ├─ index.css ├─ index.ie.css ├─ index.coffee events.yandex.ru/talks/289/ └─ index.ts102
  101. 101. ПримерПришел менеджер...
  102. 102. Пришел менеджер104
  103. 103. Пришел менеджер105
  104. 104. Пришел менеджер106
  105. 105. Пришел менеджер...107
  106. 106. ПримерБЭМ-дерево
  107. 107. <block name="product"> <elem name="title"> Световой меч...</elem> <elem name="picture"> <block name="illustration"> <elem name="image" size="mid" src="n52-105-medium.png"/> <elem name="zoom"> Большое изображение</elem></block> <elem name="price"> <elem name="price-value" value="33700"/><elem> <elem name="order-btn">Заказать<elem> <elem name="info"> Хорошо держит форму...</elem>109 ...
  108. 108. „Заказывать товары можно только с некоторых страниц o_O`110
  109. 109. ПримерФайловая структура
  110. 110. › bem create level blocks-store112
  111. 111. blocks/ ├─ product/ └─ illustration/ blocks-store/113
  112. 112. blocks/ ├─ product/ └─ illustration/ blocks-store/ └─ product/114
  113. 113. blocks/ ├─ product/ └─ illustration/ blocks-store/ └─ product/ ├─ product.bemhtml ├─ product.sass └─ product.js115
  114. 114. blocks/ ├─ product/ └─ illustration/ blocks-store/ └─ product/ ├─ order-btn/ └─ product__order-btn.sass └─ ...116
  115. 115. 117
  116. 116. blocks/ ├─ product/ └─ illustration/ blocks-store/ ├─ product/ ├─ order-btn/ └─ ... └─ button/ ├─ button.js └─ button.sass118
  117. 117. › bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store119
  118. 118. › bem build [...] -o pages/store -n store --tech=sass --tech=js --level=blocks --level=blocks-store120
  119. 119. pages/ ├─ index/ └─ store/ ├─ store.html ├─ store.css ├─ store.sass └─ store.js121
  120. 120. /* store.sass */ @import url(blocks/product/product.css); @import url(blocks-store/product/product.sass); @import url(blocks/product/title/...); @import url(blocks/product/picture/...); @import url(blocks-store/product/order-btn/...); @import url(blocks-store/button/button.sass); ... @import url(blocks/illustration/illustration.css); @import url(blocks/illustration/image/...); ...122
  121. 121. Что-то еще?
  122. 122. 124
  123. 123. 125
  124. 124. 126
  125. 125. 127
  126. 126. Материалы
  127. 127. Материалы bem.info github.com/bem129
  128. 128. Владимир ВаранкинРазработчик интерфейсовvarankinv@yandex-team.rugithub.com/narqo

×