Download - «Пишем BEM правильно» — Игорь Зенич
![Page 1: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/1.jpg)
Пишем БЭМ правильно
Классы типа block__elem__elem__elem говорят о том,что верстальщик ничего не понял в #b_.09:16 - 21 ноября 2013 Ukraine, Ukraine
Vitaly Harisov@harisov
Читать
5 РЕТВИТОВ 2 ТВИТОВ В ИЗБРАННОМОтветитьРетвитнутьВ избранное
![Page 3: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/3.jpg)
ещё один доклад про БЭМ…
![Page 4: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/4.jpg)
БЭМ —семантичный!
![Page 5: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/5.jpg)
Что он несёт?!Что он несёт?!
![Page 6: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/6.jpg)
Имена БЭМ-классов создаютдополнительный уровень логикиЕсть DOM-дерево, а есть БЭМ-дерево.
<input class="big_red_button order-button ">
<input class=" order-button b-checkout__submit ">
01.
02.
6
![Page 7: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/7.jpg)
О чём будем говорить?1. Как вручную сверстать «по-БЭМ»
2. Как не писать классы типа device-template-generic-
indicator-control-slider-bar-d :)
7
![Page 8: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/8.jpg)
Кстати, а зачемнужен БЭM?
![Page 9: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/9.jpg)
BEM CSS *
* CSS подмножество БЭМ
![Page 10: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/10.jpg)
Full stack BEMbemjson, bemhtml, bem-tools, вот это вот всё…
![Page 11: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/11.jpg)
![Page 12: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/12.jpg)
Full stack BEM?Когда он будет вам нужен — вы это сами поймёте.
Это будет момент, когда вам надоест писать html руками и вы захотите
его генерировать.
12
![Page 13: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/13.jpg)
Пример версткипо БЭМ
![Page 14: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/14.jpg)
![Page 15: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/15.jpg)
Изначальнаявёрстка →
![Page 16: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/16.jpg)
![Page 17: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/17.jpg)
Похоже на БЭМ,да?
![Page 18: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/18.jpg)
Давайте приглядимся
18
![Page 19: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/19.jpg)
Повышениеспецифичности
![Page 20: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/20.jpg)
![Page 21: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/21.jpg)
:(
![Page 23: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/23.jpg)
Непонятость БЭМ
![Page 24: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/24.jpg)
![Page 25: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/25.jpg)
![Page 26: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/26.jpg)
Методология неменялась
![Page 27: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/27.jpg)
.block
![Page 28: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/28.jpg)
![Page 29: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/29.jpg)
Независимый блокНБ или просто блок, это самодостаточный элемент страницы,
который при перемещении в другое место на странице или на другую
страницу не теряет своей самодостаточности.
БЭМ.Форум, Независимый блок“
29
![Page 30: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/30.jpg)
Правила независимости блока1. для описания элемента используется class, но не id
2. каждый блок имеет префикс
3. в таблице стилей нет классов вне блоков
БЭМ.Форум, История создания БЭМ (часть первая)“
30
![Page 31: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/31.jpg)
Как его таким написать?Просто писать стили тупо на каждый блок.
БЭМ хорош тем, что позволяет не забивать голову ерундой с каскадом,
а сосредоточимся на семантике и логике кода.
А с препроцессорами БЭМ позволяет писать еще и очень чистый и
логичный код.
31
![Page 32: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/32.jpg)
Как проверить?Просто навести на блок в инспекторе кода.
У него не должно быть каскада.
32
![Page 33: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/33.jpg)
.block__element
![Page 34: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/34.jpg)
![Page 35: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/35.jpg)
ЭлементЭлемент – это часть блока, отвечающая за отдельную функцию.
Он может находиться только в составе блока и не имеет смысла в
отрыве от него.
bem.info, Методология“
35
![Page 36: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/36.jpg)
DOM-дерево<ul>
<li>
<a>
<span></span>
</a>
</li>
</ul>
01.
02.
03.
04.
05.
06.
07.
36
![Page 37: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/37.jpg)
DOM-дерево.ul {}
.ul > li {}
.ul > li > a {}
.ul > li > a > span {}
01.
02.
03.
04.
37
![Page 38: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/38.jpg)
![Page 39: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/39.jpg)
БЭМ-дерево<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
![Page 40: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/40.jpg)
БЭМ-дерево.menu {}
.menu__item {}
.menu__link {}
.menu__text {}
01.
02.
03.
04.
40
![Page 41: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/41.jpg)
![Page 42: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/42.jpg)
БЭМ дерево — чистая логикаБЭМ-дерево не зависит ни от чего, даже от размещения в документе.
БЭМ-дерево не привязано к визуальному представлению блоков, оно
отображает только логику, это и есть новый уровень семантики!
42
![Page 43: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/43.jpg)
.block__el__el__el
![Page 44: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/44.jpg)
Так #b_ поняли и используют зарубежом
44
![Page 45: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/45.jpg)
Я тоже раньше так писал.form-buy-results__to-city__slider__tab__column_buy
Так делать нельзя
Чувак, это css-селектор или ты придумывал полноеимя для фэнтезийного короля?3:56 PM - 22 Apr 2015
Алексей Сергиенко@lehazyo_chatik
Follow
1 RETWEET 1 FAVORITEReplyRetweetFavorite
45
![Page 46: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/46.jpg)
Как надо?<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
![Page 47: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/47.jpg)
А в CSS.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
01.
02.
03.
04.
47
![Page 48: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/48.jpg)
Элемент у элемента?Если вам нужно сделать элемент у элемента, значит вам нужно:
• или создать новый блок
• или сделать ваше БЭМ-дерево с одинарной вложенностью
элементов
48
![Page 49: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/49.jpg)
Есть 2 варианта как это переписать<div class="block">
<div class="block __elem1 ">
<div class="block __elem1__elem2 "></div>
</div>
</div>
01.
02.
03.
04.
05.
49
![Page 50: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/50.jpg)
1. Бить на блоки!
![Page 51: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/51.jpg)
Делать новый блок<div class="block1">
<div class=" block2 ">
<div class=" block2 __elem"></div>
</div>
</div>
01.
02.
03.
04.
05.
51
![Page 52: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/52.jpg)
2. Рубить ветки!
![Page 53: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/53.jpg)
Делать БЭМ-дерево с 1-ой вложенностьюэлементов<div class="block1">
<div class="block1 __elem1 ">
<div class="block1 __elem2 "></div>
</div>
</div>
01.
02.
03.
04.
05.
53
![Page 54: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/54.jpg)
Типичная ошибка
![Page 55: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/55.jpg)
Попытка вложить имя элемента в имя блокаЧтоб «схитрить» и «как-будто не вложить», написать не
.block__el1__el2 а .block el1 __el2 или
.block__el1 el2 . Так нельзя.
.block {}
.block el1 {}
.block el1 __el2 {}
Будут проблемы при переносе
01.
02.
03.
55
![Page 56: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/56.jpg)
Будут проблемы при переносеПопытались перенести «странный элемент» в другое место - получили
элемент что завис «в воздухе» без блока-родителя
<div class=' someblock '>
<div class=' blockel1 __el2'></div>
</div>
Так можно делать только если .blockelem сохранит логический смыслпри переносе в другой блок.
01.
02.
03.
56
![Page 57: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/57.jpg)
element > element нельзя в CSS, но можнов HTML!Обратите внимание - вы не можете вкладывать элементы в элементы
в CSS, но можете и должны вкладывать элементы в элементы в HTML!
DOM-дерево и БЭМ-дерево могут быть разными.
57
![Page 58: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/58.jpg)
Запрет есть исключительно про нейминг!БЭМ-дерево на то и дерево, что поддерживает вложенность, поэтому
в БЭМ-дереве, разумеется, разрешается вкладывать элементы в
элементы, блоки в блоки, блоки в элементы.
Vladimir Grinenko, @tadatuta“
58
![Page 59: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/59.jpg)
Хватит!Мы не за теорией
сюда пришли.
![Page 60: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/60.jpg)
![Page 61: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/61.jpg)
![Page 62: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/62.jpg)
![Page 63: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/63.jpg)
![Page 64: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/64.jpg)
![Page 65: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/65.jpg)
![Page 66: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/66.jpg)
![Page 67: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/67.jpg)
![Page 68: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/68.jpg)
![Page 69: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/69.jpg)
![Page 70: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/70.jpg)
![Page 71: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/71.jpg)
Мы написали 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
![Page 72: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/72.jpg)
Нет каскада:.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
01.
02.
03.
04.
72
![Page 73: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/73.jpg)
Модификация
![Page 74: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/74.jpg)
6 видов1. Модификатором
• модификатором блока
• модификатором элемента
2. Контекстом (т.е. каскадом от блока выше)
3. Уровнем переопределения (добавлением-перезаписью файла
стилей)
4. Миксованием (добавлением классов других блоков)
• включая глобальный класс
74
![Page 75: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/75.jpg)
Просто добавляйте модификатор!<div class="block-name__elem _key_value ">
А для элементов — делай каскад от модификатора.
75
![Page 76: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/76.jpg)
Модификаторы для элементов, можно?Если речь идет о простых правках, типа «активный пункт меню», то да,
можно:
<a class="menu__link menu__link _state_active ">
76
![Page 77: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/77.jpg)
Булевые модификаторыКстати в таких простых случаях, можно писать модификаторы просто
одним словом:
<a class="menu__link menu__link _active ">
77
![Page 78: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/78.jpg)
![Page 79: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/79.jpg)
Но подумайте, может это новый блок?
Что вы думаете о модификаторах на элементы? #b_28 ноябряIgor Zenich @delaz
@delaz ГРЕШНОВАТО11:56 - 29 ноября 2014
БЭМ@bem_xxx
Читать
1 РЕТВИТ ИЗБРАННОЕ: 1ОтветитьРетвитнутьВ избранное
79
![Page 80: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/80.jpg)
БЭМ допускаетошибки
![Page 81: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/81.jpg)
Самыепопулярные
ошибки
![Page 82: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/82.jpg)
1. block__el__elНапример, слайдеры очень часто верстают дикой вложенностью.
82
![Page 83: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/83.jpg)
2. Повышение специфичностиВ html как-будто всё ok:
<div class="block">
<div class="block__el">
А на деле сели в машину и сгорели:
/* CSS */
.block .block__el {}
01.
02.
01.
02.
83
![Page 84: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/84.jpg)
3. Стили вне блоков<ul class="menu checkoutForm big myfuckingclass-bold ">
84
![Page 85: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/85.jpg)
Почему это ошибки?Да потому что из-за этого потом тяжелей вносить правки и сложно
переместить блок в другое место.
85
![Page 86: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/86.jpg)
Как мне?...
![Page 87: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/87.jpg)
Вывести текст из WYSIWYG?Как назначаются стили для типографики? Не будешь же назначать
каждому тегу какой-то класс?
Artur Kornakov, @fliptheweb“87
![Page 88: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/88.jpg)
Добавить .b-text.b-text блоку родителюИ использовать каскад.
.b-text h2 {}
.b-text p {}
.b-text img {}
.b-text ul li {}
Конечно при большом желании можно настроить визивиг, тот жеTinyMCE, чтоб он добавлял нужные имена классов в тегах из визивига.
01.
02.
03.
04.
88
![Page 90: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/90.jpg)
Пример переверстки по БЭМ(упрощенный)• http://net-craft.com/old
• http://net-craft.com/
• http://net-craft.com/wp-content/themes/netcraft/dev/sass/main.scss
90
![Page 91: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/91.jpg)
Диалекты БЭМ
![Page 92: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/92.jpg)
Вот это вот всё на 5 минут:• Использование префиксов
• Альтернативный синтаксис
• Сокращённые модификаторы
• JS-блоки
92
![Page 93: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/93.jpg)
Префиксыb- , l- , g- , i- , h- , m- , js- …
Придумывайте любые правила
Они нужны вам только для пространства имен.
93
![Page 94: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/94.jpg)
Альтернативный синтаксис и camelCaseМногим нравится зарубежный формат модификаторов, через „--“, он
читабельней.
<a class="block-name__element-name --state_active ">
94
![Page 95: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/95.jpg)
Альтернативный синтаксис и camelCaseА через camelCase – ещё читабельней!
<a class=" blockName__elementName --state_active">
95
![Page 96: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/96.jpg)
Сокращенныемодификаторы
![Page 97: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/97.jpg)
Сокращенные модификаторыПравильно писать так:
.block-name__elem _key_value
Или так:
.blockName__elem --key_value
97
![Page 98: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/98.jpg)
Сокращенные модификаторыНо некоторых из тех, кто пишет код вручную, такие модификаторы
бесят нечитабельностью кода:
<div class="block-name block-name_key1_value1
block-name_key2_value2 block-name_key3_value3 ">
98
![Page 99: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/99.jpg)
Сокращенные модификаторы…и отсутствием дуракоустойчивости:
<div class=" block-name_key1_value1 some-another-
block">
99
![Page 100: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/100.jpg)
Сокращенные модификаторыИм хочется так:
<div class="block-name -key1_value1 -key2_value2 -
key3_value3 ">
100
![Page 101: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/101.jpg)
Сокращенные модификаторы<div class="blockName__elem .-key_value ">
.blockName {
&__elem {
& .-key_value {
}
}
}
01.
02.
03.
04.
05.
06.
07.
101
![Page 102: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/102.jpg)
Миксы!Full BEM Stack!
![Page 103: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/103.jpg)
JS-блоки$(' .js- fancybox').fancybox();
103
![Page 104: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/104.jpg)
Вы можете создавать свои гайдлайны• https://github.com/ideus-team/guidelines/blob/master/frontend/
bem.md
• http://nano.sapegin.ru/all/opor-methodology
104
![Page 105: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/105.jpg)
Это всё БЭМ
![Page 106: «Пишем BEM правильно» — Игорь Зенич](https://reader036.vdocuments.mx/reader036/viewer/2022062313/55cd2dfabb61ebf2038b47ae/html5/thumbnails/106.jpg)
Спасибо!Igor Zenich, iDeus
• delka.name
• twitter.com/delaz
Презентация: delka.github.io/talks/webcamp/2015/bem/
106