04.07.2015 WebCamp:Front-end Developers Day Игорь Зенич (Team Lead at iDeus) "Пишем БЭМ правильно" Вы совершенно не понимаете сути БЭМ. БЭМ — это не фреймворк «клац-клац и в продакшен». БЭМ — это не длинные CSS-классы. БЭМ — это не религия. БЭМ — это, в первую очередь, паттерн. Паттерн мышления и разработки. Но за 6 лет о нём нигде так и не написали понятным языком с примерами верстки обычных маленьких сайтов без BEMJSON, BEM Tools и вот этого вот всего. Я расскажу вам о своём 3-летнем опыте внедрения и использования БЭМ для жестокого мира аутсорса и про те грабли, на которые мы наступали. Подробнее: http://geekslab.co, http://webcamp.in.ua/ https://www.facebook.com/GeeksLab.co , https://www.facebook.com/OdessaInnovationWeek https://www.youtube.com/user/GeeksLabVideo

1. Пишем БЭМ правильно
Классы типа block__elem__elem__elem говорят о том,
что верстальщик ничего не понял в #b_.
09:16 - 21 ноября 2013 Ukraine, Ukraine
Vitaly Harisov
@harisov
Читать
5 РЕТВИТОВ 2 ТВИТОВ В ИЗБРАННОМ
ОтветитьРетвитнутьВ избранное

3. ещё один доклад про БЭМ…

4. БЭМ —
семантичный!

5. Что он несёт?!Что он несёт?!

6. Имена БЭМ-классов создают
дополнительный уровень логики
Есть DOM-дерево, а есть БЭМ-дерево.
<input class="big_red_button order-button ">
<input class=" order-button b-checkout__submit ">
01.
02.
6

7. О чём будем говорить?
1. Как вручную сверстать «по-БЭМ»
2. Как не писать классы типа device-template-generic-
indicator-control-slider-bar-d :)
7

8. Кстати, а зачем
нужен БЭM?

9. BEM CSS *
*
CSS подмножество БЭМ

10. Full stack BEM
bemjson, bemhtml, bem-tools, вот это вот всё…

12. Full stack BEM?
Когда он будет вам нужен — вы это сами поймёте.
Это будет момент, когда вам надоест писать html руками и вы захотите
его генерировать.
12

13. Пример верстки
по БЭМ

15. Изначальная
вёрстка →

17. Похоже на БЭМ,
да?

18. Давайте приглядимся
18

19. Повышение
специфичности

21. :(

22. bit.ly/not-bem

23. Непонятость БЭМ

26. Методология не
менялась

27. .block

29. Независимый блок
НБ или просто блок, это самодостаточный элемент страницы,
который при перемещении в другое место на странице или на другую
страницу не теряет своей самодостаточности.
БЭМ.Форум, Независимый блок
“
29

30. Правила независимости блока
1. для описания элемента используется class, но не id
2. каждый блок имеет префикс
3. в таблице стилей нет классов вне блоков
БЭМ.Форум, История создания БЭМ (часть первая)
“
30

31. Как его таким написать?
Просто писать стили тупо на каждый блок.
БЭМ хорош тем, что позволяет не забивать голову ерундой с каскадом,
а сосредоточимся на семантике и логике кода.
А с препроцессорами БЭМ позволяет писать еще и очень чистый и
логичный код.
31

32. Как проверить?
Просто навести на блок в инспекторе кода.
У него не должно быть каскада.
32

33. .block__element

35. Элемент
Элемент – это часть блока, отвечающая за отдельную функцию.
Он может находиться только в составе блока и не имеет смысла в
отрыве от него.
bem.info, Методология
“
35

36. DOM-дерево
<ul>
<li>
<a>
<span></span>
</a>
</li>
</ul>
01.
02.
03.
04.
05.
06.
07.
36

37. DOM-дерево
.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}
01.
02.
03.
04.
37

39. БЭМ-дерево
<ul class=" menu ">
<li class=" menu__item ">
<a class=" menu__link ">
<span class=" menu__text "></span>
</a>
</li>
</ul>
01.
02.
03.
04.
05.
06.
07.
39

40. БЭМ-дерево
.menu {}
.menu__item {}
.menu__link {}
.menu__text {}
01.
02.
03.
04.
40

42. БЭМ дерево — чистая логика
БЭМ-дерево не зависит ни от чего, даже от размещения в документе.
БЭМ-дерево не привязано к визуальному представлению блоков, оно
отображает только логику, это и есть новый уровень семантики!
42

43. .block__el__el__el

44. Так #b_ поняли и используют зарубежом
44

45. Я тоже раньше так писал
.form-buy-results__to-city__slider__tab__column_buy
Так делать нельзя
Чувак, это css-селектор или ты придумывал полное
имя для фэнтезийного короля?
3:56 PM - 22 Apr 2015
Алексей Сергиенко
@lehazyo_chatik
Follow
1 RETWEET 1 FAVORITE
ReplyRetweetFavorite
45

46. Как надо?
<div class="block">
<div class="block __elem1 ">
<div class="block __elem2 "></div>
</div>
<div class="block __elem3 "></div>
</div>
01.
02.
03.
04.
05.
06.
46

47. А в CSS
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
01.
02.
03.
04.
47

48. Элемент у элемента?
Если вам нужно сделать элемент у элемента, значит вам нужно:
• или создать новый блок
• или сделать ваше БЭМ-дерево с одинарной вложенностью
элементов
48

49. Есть 2 варианта как это переписать
<div class="block">
<div class="block __elem1 ">
<div class="block __elem1__elem2 "></div>
</div>
</div>
01.
02.
03.
04.
05.
49

50. 1. Бить на блоки!

51. Делать новый блок
<div class="block1">
<div class=" block2 ">
<div class=" block2 __elem"></div>
</div>
</div>
01.
02.
03.
04.
05.
51

52. 2. Рубить ветки!

53. Делать БЭМ-дерево с 1-ой вложенностью
элементов
<div class="block1">
<div class="block1 __elem1 ">
<div class="block1 __elem2 "></div>
</div>
</div>
01.
02.
03.
04.
05.
53

54. Типичная ошибка

55. Попытка вложить имя элемента в имя блока
Чтоб «схитрить» и «как-будто не вложить», написать не
.block__el1__el2 а .block el1 __el2 или
.block__el1 el2 . Так нельзя.
.block {}
.block el1 {}
.block el1 __el2 {}
Будут проблемы при переносе
01.
02.
03.
55

56. Будут проблемы при переносе
Попытались перенести «странный элемент» в другое место - получили
элемент что завис «в воздухе» без блока-родителя
<div class=' someblock '>
<div class=' blockel1 __el2'></div>
</div>
Так можно делать только если .blockelem сохранит логический смысл
при переносе в другой блок.
01.
02.
03.
56

57. element > element нельзя в CSS, но можно
в HTML!
Обратите внимание - вы не можете вкладывать элементы в элементы
в CSS, но можете и должны вкладывать элементы в элементы в HTML!
DOM-дерево и БЭМ-дерево могут быть разными.
57

58. Запрет есть исключительно про нейминг!
БЭМ-дерево на то и дерево, что поддерживает вложенность, поэтому
в БЭМ-дереве, разумеется, разрешается вкладывать элементы в
элементы, блоки в блоки, блоки в элементы.
Vladimir Grinenko, @tadatuta
“
58

59. Хватит!
Мы не за теорией
сюда пришли.

71. Мы написали BEM-дерево:
<div class="block">
<div class="block __elem1 ">
<div class="block __elem2 "></div>
</div>
<div class="block __elem3 "></div>
</div>
01.
02.
03.
04.
05.
06.
71

72. Нет каскада:
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
01.
02.
03.
04.
72

73. Модификация

74. 6 видов
1. Модификатором
• модификатором блока
• модификатором элемента
2. Контекстом (т.е. каскадом от блока выше)
3. Уровнем переопределения (добавлением-перезаписью файла
стилей)
4. Миксованием (добавлением классов других блоков)
• включая глобальный класс
74

75. Просто добавляйте модификатор!
<div class="block-name__elem _key_value ">
А для элементов — делай каскад от модификатора.
75

76. Модификаторы для элементов, можно?
Если речь идет о простых правках, типа «активный пункт меню», то да,
можно:
<a class="menu__link menu__link _state_active ">
76

77. Булевые модификаторы
Кстати в таких простых случаях, можно писать модификаторы просто
одним словом:
<a class="menu__link menu__link _active ">
77

79. Но подумайте, может это новый блок?
Что вы думаете о модификаторах на элементы? #b_
28 ноябряIgor Zenich @delaz
@delaz ГРЕШНОВАТО
11:56 - 29 ноября 2014
БЭМ
@bem_xxx
Читать
1 РЕТВИТ ИЗБРАННОЕ: 1
ОтветитьРетвитнутьВ избранное
79

80. БЭМ допускает
ошибки

81. Самые
популярные
ошибки

82. 1. block__el__el
Например, слайдеры очень часто верстают дикой вложенностью.
82

83. 2. Повышение специфичности
В html как-будто всё ok:
<div class="block">
<div class="block__el">
А на деле сели в машину и сгорели:
/* CSS */
.block .block__el {}
01.
02.
01.
02.
83

84. 3. Стили вне блоков
<ul class="menu checkoutForm big myfuckingclass-bold ">
84

85. Почему это ошибки?
Да потому что из-за этого потом тяжелей вносить правки и сложно
переместить блок в другое место.
85

86. Как мне?...

87. Вывести текст из WYSIWYG?
Как назначаются стили для типографики? Не будешь же назначать
каждому тегу какой-то класс?
Artur Kornakov, @fliptheweb
“
87

88. Добавить .b-text.b-text блоку родителю
И использовать каскад.
.b-text h2 {}
.b-text p {}
.b-text img {}
.b-text ul li {}
Конечно при большом желании можно настроить визивиг, тот же
TinyMCE, чтоб он добавлял нужные имена классов в тегах из визивига.
01.
02.
03.
04.
88

89. Задавайте
вопросы:
ru.bem.info/forum

90. Пример переверстки по БЭМ
(упрощенный)
• http://net-craft.com/old
• http://net-craft.com/
• http://net-craft.com/wp-content/themes/netcraft/dev/sass/main.scss
90

91. Диалекты БЭМ

92. Вот это вот всё на 5 минут:
• Использование префиксов
• Альтернативный синтаксис
• Сокращённые модификаторы
• JS-блоки
92

93. Префиксы
b- , l- , g- , i- , h- , m- , js- …
Придумывайте любые правила
Они нужны вам только для пространства имен.
93

94. Альтернативный синтаксис и camelCase
Многим нравится зарубежный формат модификаторов, через „--“, он
читабельней.
<a class="block-name__element-name --state_active ">
94

95. Альтернативный синтаксис и camelCase
А через camelCase – ещё читабельней!
<a class=" blockName__elementName --state_active">
95

96. Сокращенные
модификаторы

97. Сокращенные модификаторы
Правильно писать так:
.block-name__elem _key_value
Или так:
.blockName__elem --key_value
97

98. Сокращенные модификаторы
Но некоторых из тех, кто пишет код вручную, такие модификаторы
бесят нечитабельностью кода:
<div class="block-name block-name_key1_value1
block-name_key2_value2 block-name_key3_value3 ">
98

99. Сокращенные модификаторы
…и отсутствием дуракоустойчивости:
<div class=" block-name_key1_value1 some-another-
block">
99

100. Сокращенные модификаторы
Им хочется так:
<div class="block-name -key1_value1 -key2_value2 -
key3_value3 ">
100

101. Сокращенные модификаторы
<div class="blockName__elem .-key_value ">
.blockName {
&__elem {
& .-key_value {
}
}
}
01.
02.
03.
04.
05.
06.
07.
101

102. Миксы!
Full BEM Stack!

103. JS-блоки
$(' .js- fancybox').fancybox();
103

104. Вы можете создавать свои гайдлайны
• https://github.com/ideus-team/guidelines/blob/master/frontend/
bem.md
• http://nano.sapegin.ru/all/opor-methodology
104

105. Это всё БЭМ

106. Спасибо!
Igor Zenich, iDeus
• delka.name
• twitter.com/delaz
• igor@delka.name
Презентация: delka.github.io/talks/webcamp/2015/bem/
106