Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.
Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.
Слайды: delka.github.io/talks/webcamp/2015/bem
Комментарии (19)
limonte
07.07.2015 17:23+3Я тут BEM генератор набросал: limonte.github.io/bem-classname-generator :) Утрирую конечно, но «прелесть» BEM, думаю, показал.
Delphinum
07.07.2015 22:07+1Чем решение вида:
.block .element { }
хуже:
.block__element{ }
vithar
07.07.2015 22:18+1Тем, что .element может быть у другого вложенного блока и это правило его затронет.
Delphinum
07.07.2015 22:22+1Ну и замечательно, значит стиль в .element должен быть написан так, чтобы он затрагивал все однотипные блоки.
vithar
07.07.2015 22:46+2Это разные элементы разных блоков с одинаковым именем. У них не модет быть написан стиль так, чтобы он затрагивал однотипные блоки по определению.
.menu .menu__item .list .list__item
Это разные item разных блоков. Если писать стили просто на .item — будет коллизия.Delphinum
07.07.2015 22:55А в БАМ пишутся стили только на item? На сколько я знаю, все item пишутся в CSS как:
.block__item{ }vithar
07.07.2015 22:59+1Вы спросили чем запись .block .element хуже чем .block__element. Я ответил.
Delphinum
07.07.2015 23:00Нет, не ответили. Никаких коллизий не будет.
vithar
07.07.2015 23:09+1Стили написанные для .menu .item будут применяться и к .list .item. Это side effect. В случае применения БЭМ-нотации этого можно избежать, стили компонент не пересекаются.
nomn
08.07.2015 13:20А если использовать .menu.item или .menu > .item? Мне тоже не до конца понятна выгода от такого именования, хотя уверен, что она есть.
Polyuretan
08.07.2015 13:32+1.menu > .item развалится как только вы добавите какую-то обертку над item. Там одна из фишек как раз в том, что верстку можно менять почти как угодно и все продолжит работать.
Delka Автор
08.07.2015 00:07+1 и также это повышает специфичность селектора, что ограничивает вас в действиях — вы не сможете писать стили на сам .element без !important или без указания контекста (блока родителя .block).
vanxant
07.07.2015 23:00Ну как же, у вас каскад появится, браузер будет тормозить!
Aingis
08.07.2015 00:29Это далеко не самая тяжёлая штука для браузеров, проверяется только специфичный класс, проверка несложная, да ещё движки оптимизируют кейс селектора вложенности (по крайней мере ходили слухи). Можно написать куда более тяжёлые селекторы, но заметить даже их влияние можно будет только на огромных страницах с большими таблицами стилей или в сложных случаях динамических действий на страницах, где нужно очень много пересчётов стилей.
P.S. Каскад — это принцип применения селектора в зависимости от специфичности, порядка применения и прочего.
Delka Автор
Официальное видео ожидается в течение месяца-двух, пока что у нас есть только «пиратская» запись.