Видео доклада «Пишем #b_ правильно» с WebCamp 2015

[Delka]

Официальное видео ожидается в течение месяца-двух, пока что у нас есть только «пиратская» запись.

[limonte]

Я тут BEM генератор набросал: limonte.github.io/bem-classname-generator :) Утрирую конечно, но «прелесть» BEM, думаю, показал.

[Delphinum]

Чем решение вида:

.block .element {
}

хуже:

.block__element{
}

[vithar]

Тем, что .element может быть у другого вложенного блока и это правило его затронет.

[Delphinum]

Ну и замечательно, значит стиль в .element должен быть написан так, чтобы он затрагивал все однотипные блоки.

[vithar]

Это разные элементы разных блоков с одинаковым именем. У них не модет быть написан стиль так, чтобы он затрагивал однотипные блоки по определению.

.menu
    .menu__item
        .list
            .list__item

Это разные item разных блоков. Если писать стили просто на .item — будет коллизия.

[Delphinum]

А в БАМ пишутся стили только на item? На сколько я знаю, все item пишутся в CSS как:

.block__item{
}

[vithar]

Вы спросили чем запись .block .element хуже чем .block__element. Я ответил.

[Delphinum]

Нет, не ответили. Никаких коллизий не будет.

[vithar]

При таком использовании будут коллизии:

.menu
    .menu .item
        .list
            .list .item

[vithar]

Стили написанные для .menu .item будут применяться и к .list .item. Это side effect. В случае применения БЭМ-нотации этого можно избежать, стили компонент не пересекаются.

[Delphinum]

Понял. Спасибо.

[nomn]

А если использовать .menu.item или .menu > .item? Мне тоже не до конца понятна выгода от такого именования, хотя уверен, что она есть.

[Polyuretan]

.menu > .item развалится как только вы добавите какую-то обертку над item. Там одна из фишек как раз в том, что верстку можно менять почти как угодно и все продолжит работать.

[Delka]

+1 и также это повышает специфичность селектора, что ограничивает вас в действиях — вы не сможете писать стили на сам .element без !important или без указания контекста (блока родителя .block).

[vanxant]

Ну как же, у вас каскад появится, браузер будет тормозить!

[Delphinum]

ох уж эти тормозящие браузеры! )

[vithar]

Дело не в тормозах, а в коллизии стилей компонент.