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

  • Tutorial
«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.

Как сверстать сайт вручную «по-БЭМ» без классов «block__element__element», и на реальном примере со всеми его проблемами, а не меню-пункт_меню-ссылочка, как вы видели раньше. Без BEMJSON, BEM Tools, но с миксованием, модификаторами и разбором ошибок.

Я знаком с БЭМ давно и все эти годы встречался с множеством заблуждений и стереотипов в использовании. В докладе постарался развеять популярные мифы и рассказал о своём трехлетнем опыте внедрения и использования БЭМ и связанным с этим наступании на грабли.

Слайды: delka.github.io/talks/webcamp/2015/bem



Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 19

    0
    Официальное видео ожидается в течение месяца-двух, пока что у нас есть только «пиратская» запись.
      +3
      Я тут BEM генератор набросал: limonte.github.io/bem-classname-generator :) Утрирую конечно, но «прелесть» BEM, думаю, показал.
        +1
        Чем решение вида:
        .block .element {
        }
        

        хуже:
        .block__element{
        }
        
          +1
          Тем, что .element может быть у другого вложенного блока и это правило его затронет.
            +1
            Ну и замечательно, значит стиль в .element должен быть написан так, чтобы он затрагивал все однотипные блоки.
              +2
              Это разные элементы разных блоков с одинаковым именем. У них не модет быть написан стиль так, чтобы он затрагивал однотипные блоки по определению.

              .menu
                  .menu__item
                      .list
                          .list__item


              Это разные item разных блоков. Если писать стили просто на .item — будет коллизия.
                0
                А в БАМ пишутся стили только на item? На сколько я знаю, все item пишутся в CSS как:
                .block__item{
                }
                
                  +1
                  Вы спросили чем запись .block .element хуже чем .block__element. Я ответил.
                    0
                    Нет, не ответили. Никаких коллизий не будет.
                      +1
                      При таком использовании будут коллизии:

                      .menu
                          .menu .item
                              .list
                                  .list .item
                        +1
                        Стили написанные для .menu .item будут применяться и к .list .item. Это side effect. В случае применения БЭМ-нотации этого можно избежать, стили компонент не пересекаются.
                          0
                          Понял. Спасибо.
                            0
                            А если использовать .menu.item или .menu > .item? Мне тоже не до конца понятна выгода от такого именования, хотя уверен, что она есть.
                              +1
                              .menu > .item развалится как только вы добавите какую-то обертку над item. Там одна из фишек как раз в том, что верстку можно менять почти как угодно и все продолжит работать.
                  0
                  +1 и также это повышает специфичность селектора, что ограничивает вас в действиях — вы не сможете писать стили на сам .element без !important или без указания контекста (блока родителя .block).
                  0
                  Ну как же, у вас каскад появится, браузер будет тормозить!
                    0
                    ох уж эти тормозящие браузеры! )
                      +2
                      Дело не в тормозах, а в коллизии стилей компонент.
                      • UFO just landed and posted this here

                    Only users with full accounts can post comments. Log in, please.