Возможно многие из вас уже пишут по БЭМу, просто не догадываются об этом, ведь БЭМ на самом деле не требует даже классов вида .block__element, срыв покровов в блице. Web Standards Days Kyiv 28 ноября 2015 #wstdays https://wsd.events/2015/11/28/ Видео: https://www.youtube.com/watch?v=_Sx5jvT0qEU&t=2h22m00s Слайды: http://bit.ly/bem-in-the-wild

1. БЭМ в дикой природе
.block__el__el
.b-block
.block--mod
…

2. DOM-дерево
<UL>
<LI>
<A>
<SPAN></SPAN>
</A>
</LI>
</UL>
01.
02.
03.
04.
05.
06.
07.

3. БЭМ-дерево
<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.

5. В исходниках этой презентации
спрятались подсказки!
В комментах html написаны тезисы доклада и комментарии к
слайдам требующим пояснений.
Презентация: bit.ly/bem-in-the-wild
5

6. bit.ly/
bem-in-the-wild

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

8. Ну сколько
уже можно, а?…

9. В прошлом году мы обсуждали
ручную вёрстку по БЭМ…
Презентация:
bit.ly/bem-css-right
Видео доклада:
youtube.com/
watch?v=kBgHdSOj33A
Презентация содержит больше слайдов и примеров, чем
оригинальное видео.
9

10. Что значит
«по-БЭМ»?

11. — Мы используем БЭМ, но не FullStack, а #b_ в CSS.
— Нет, не как в Яндексе.
— Как?
— Ну как Гарри Робертс писал…
— Как именно, он разное писал?
— Fuck.
“
11

12. Each time we have to understand what exactly BEM we are talking
about. Both with customer and internally in the team.
Даже внутри специализированной рассылки слова
"они перешли на БЭМ!" могут означать что угодно.
2:45 PM - 20 Nov 2015
AAndrndreey Melikhoy Melikhovv
@amel_true
Follow
11 RETWEET 11 FAVORITE
ReplyRetweetFavorite
“
12

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

15. Проблема с
документацией

18. Яндекс-БЭМ
(Full Stack BEM)

19. Виталий Харисов

20. Сергей Бережной

21. Пример кода Яндекс-БЭМ
Верстаем надпись «Привет», input и кнопку.
21

22. Пример кода Яндекс-БЭМ
({
block : 'page',
title : 'hello',
head : [
{ elem : 'css', url : 'hello.min.css' }
],
scripts : [{ elem : 'js', url : 'hello.min.js' }],
mods : { theme : 'islands' },
content : [
{
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
22

23. Верстаем-верстаем, это BEMJSON
content : [
{
block : 'hello',
content : [{
elem : 'greeting',
content : 'Привет, %пользователь%!'
},{
block : 'input',
mods : {theme : 'islands', size : 'm'},
name : 'name',
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
23

24. Осталось кнопочку добавить…
{
block : 'button',
mods : {theme : 'islands', size : 'm',
type : 'submit'},
text : 'Нажать'
}
]
}
]
})
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
24

25. Это ещё не всё.
Тепер надо написать BEMHTML.
block('hello')(
js()(true),
tag()('form')
);
01.
02.
03.
04.
25

26. Кстати CSS и JS тоже надо писать

27. БЭМ пугал когда он вышел. Там была простыня
текста в документации на не очень прямом
английском про философию.
10:06 - 6 августа 2015
РРазрабоазработчиктчик
@jsunderhood
Читать
11 ТВИТ В ИЗБРАННОМ
ОтветитьРетвитнутьВ избранное
Что я имел ввиду - авторы БЭМ не смогли его
продать. В том числе из-за сложной и не очень
удобной документации, ИМХО.
10:06 - 6 августа 2015
РРазрабоазработчиктчик
@jsunderhood
Читать
11 РЕТВИТОВ 44 ТВИТОВ В ИЗБРАННОМ
ОтветитьРетвитнутьВ избранное
27

28. Даже разработчики Google Material Design не смогли с
первого раза правильно написать имена классов по БЭМ
:)

29. Диалекты БЭМ
БЭМ это фреймворк для создания фреймворков.
14:50 - 12 июля 2015 Ukraine, Ukraine
Vitaly HarisoVitaly Harisovv
@harisov
Читать
33 РЕТВИТОВ 11 ТВИТОВ В ИЗБРАННОМ
ОтветитьРетвитнутьВ избранное

30. OPOR

31. Артем Сапегин

32. OPOR
Известный пример использования методологии БЭМ сторонним
разработчиком - Артёмом Сапегиным.
.logo {color: saddlebrown;}
.page_about .logo {color: ghostwhite;}
social-button i {}
<div class="social-button"><i></i></div>
.scrollable
a.fake
.is-expanded
.js-select
01.
02.
03.
04.
05.
06.
07.
08.
32

33. BEViS

34. Вадим Макишвили

35. BEViS
Диалект БЭМ, с более строгими правилами для максимальной
надежности верстки, придуманный Вадимом Макишвили для
Яндекс.Карт.
Нет миксов.
Нет модификаторов.
Есть состояния:
<div class="popup _orientation_top"></div>
<button class="button _pressed _focused"></div>
.button._pressed {}
01.
02.
03.
35

36. BEMIT

37. Гарри Робертс и Николас Галлахер

38. BEMIT: пространства имен
Продвинутое использование префиксов и суффиксов от Гарри
Робертса. Попытка описать взаимосвязь между независимыми
блоками с точки зрения SMACSS и OOCSS.
<div class="o-media@md c-user c-user--premium">
<img src="" class="o-media__img@md c-user__photo" />
<p class="o-media__body@md c-user__bio">...</p>
</div>
01.
02.
03.
04.
38

39. БЁМ

40. Роман Комаров

41. БЁМ: шутка всерьез
БЭМ в котором можно писать как хочешь. Хоть с элементами
элементов.
.block__element__subelement
Теперь я использую БЁМ — это примерно как БЭМ, только вы
можете писать его как хотите, а не как укажет партия или
церковь. Ура!
Роман Комаров
“
41

42. Префиксы

43. Префиксы
b- ,
l- ,
g- ,
i- ,
h- ,
m- ,
c- и js- ,
qa- ,
o- ,
c- (другой :),
u- ,
t- ,
s- ,
is- ,
has- …
43

44. Синтаксис

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

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

47. Стиль без подчеркиваний
Некоторые идут ещё дальше и заменяют __ на - . camelCase
единственный гарантирует что вы поймете где блок, а где
элемент.
<a class=" blockName-elementName --state_active">
47

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

49. Сокращенные модификаторы
Зарубежом их назвали „Individual modifiers: a shorter syntax“. У
нас перевели как «Обособленные модификаторы: сокращенный
синтаксис». Яндекс в официальной документации называет их
«Стиль No-namespace».
<div class="blockName__elem -key_value ">
.blockName {
&__elem {
& .-key_value {
}
01.
02.
03.
04.
05.
49

50. JS-блоки

51. JS-блоки
$(' .js- fancybox').fancybox();
Это миксование css-блока и js-блока на одной dom-ноде.
Канонический БЭМ считает, что они не нужны, т.к. js-функционал
нет смысла отделять от блока. Гарри Робертс и не-Яндекс
разработчики их активно используют и пропагандируют: т.к.
разделение позволяет легко копировать css-блок без связанного с
ним JS.
51

52. Google MDL

53. Google MDL
Библиотека блоков от Google, css-реализации их Material Design
придуманного для Android.
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button>
mdl-button--raised>
mdl-js-ripple-effect>
mdl-button--accent">
Button
</button>
01.
02.
03.
04.
05.
06.
07.
53

54. Госдеп

55. U.S. Goverment: 18F BEM
.accordion
.accordion-item
.accordion-item-selected
.nav_bar
.nav_bar-link
.nav_bar-link-clicked
01.
02.
03.
04.
05.
06.
07.
55

56. BEML /
posthtml-bem /
BEMto

57. BEML
Препроцессор BEM для HTML через Grunt/Gulp
<div block="b-animals">
<div elem="cat" mod="size:big, color:red"></div>
</div>
01.
02.
03.
57

58. posthtml-bem
Препроцессор BEM для HTML через PostHTML.
Синтаксис почти такой же, но с отличиями!
<div block="MadTeaParty">
<div elem="march-hare" mods="type:mad">March Hare</div>
<div elem="march-hare" mods="mad">March Hare</div>
</div>
Please use "mods" for the attribute modifiers instead of "mod" and a
space as a separator of modifiers instead of a comma.
01.
02.
03.
04.
58

59. BEMto
Написание BEM в Jade.
+b.block1
+e.element1 Foo
+b.block2
+e('a')(href="#bar").element Bar
+e.element2 Baz
01.
02.
03.
04.
05.
59

60. Вы можете создавать свои
гайдлайны
БЭМ дает лишь базовый набор правил, конкретную реализацию и
синтаксис вы выбираете сами.
• Harry Roberts
• iDeus
• Artem Sapegin
• CodeRiver (Yuriy Artyukh, cssing.org.ua)
• AzaGroup
60

61. bem.info

62. getbem.com

63. Это всё БЭМ

64. Методология и
реализации

65. Реализации БЭМ:
• OPOR
• BEViS
• BEMIT
• БЁМ
• 18F BEM
• Harry Roberts BEM
• iDeus BEM
• Coderiver BEM
• AzaBEM
65

66. BEM is like Agile

67. Роберт Харитонов

68. MCSS → BEM
Как автор MCSS, рекоммендую теперь уже использовать
именно БЭМ. С тех пор он стал менее строгим, и более
понятным. MCSS может пригодится только на очень большом,
монолитном проекте.
Роберт Харитонов
“
68

69. Джонатан Снук

70. SMACSS → BEM
Most common misspelling is “SMACCS”.
I should just rename it to BEM.
Jonathan Snook
“
70

71. ru.bem.info/
forum/

72. Slack WSD
/bem

73. Пробуйте!

74. %Company%
BEM

75. Читать дальше
• Cоветы от ведущих БЭМ-разработчиков: ошибки и best practices
• BEM Quick Start Guide — БЭМ: UnOfficial Team
• Мажорный релиз новой документации — БЭМ: Яндекс Team
• Full BEM Stack в HTML — Владимир Гриненко
• Классификация ошибок BEM CSS (со стр. 50) — Александр
Корецкий @n2j7
• Material Design Lite CSS — Google
• i-bem.js
• варианты использования префиксов от Гарри Робертса
• BEMIT — Harry Roberts
75

76. …и дальше
• что такое блок, префикс b- и что такое независимый блок
• контекстные блоки (темы) (раздел «Внутри контекстного блока»)
• layout-блоки и холдер-блоки
• как позиционировать БЭМ-блоки относительно друг друга
• абстрактные блоки (раздел „i-, от include“) и их реализация в
Sass через %extend-only-selector+extend или лучше через
mixin+include
• уровни переопределения (раздел «Модификация файлами») и
структура блоков на файловой системе
• глобальные модификаторы
76

77. Спасибо!
Igor Zenich
EPAM
• delka.name
• twitter.com/delaz
• igor@delka.name
Презентация: bit.ly/bem-in-the-wild
77