Мини-доклад по мотивам вопросов из зала на тему смешивания разных БЭМ-сущностей на одной DOM-элементе. Подробнее описывается, что такое миксы и как мы их применяем для создания блоков, состоящих из других блоков.

1. MIX:
зачем смешивать блоки
Сергей Бережной
руководитель отдела
разработки поисковых интерфейсов

2. Блоки по отдельности
2

3. Блоки по отдельности
<input class="button" ... />
3

4. Блоки по отдельности
<input class="
button
button_theme_gray" ... />
4

5. Блоки по отдельности
5

6. Блоки по отдельности
<input class="input" ... />
6

7. Блоки по отдельности
<input class="
input
input_theme_gray" ... />
7

8. Смешивание
8

9. Смешивание
<input class="input" ... />
<input class="button" ... />
9

10. Смешивание
<form class="search">
<input class="input" ... />
<input class="button" ... />
</form>
10

11. Смешивание
<form class="search">
<input class="
input
search__input" ... />
<input class="
button
search__button" ... />
</form>
11

12. Смешивание
<input class="
input
search__input
my-mod_my-val" ... />
12

13. Смешивание
.input { ... }
.input.my-mod_my-val { ... }
13

14. Смешивание
.search_input { ... }
.search_input.my-mod_my-val { ... }
14

15. Смешивание
<input class="
input
search__input
my-mod_my-val" ... />
15

16. Сергей Бережной
руководитель отдела
разработки
поисковых интерфейсов
veged@yandex-team.ru
github.com/veged
@veged
Спасибо