07.07.2015 10:25
Delka 19 7062 Источник
«Пиратское» видео доклада «Пишем #b_ правильно» с конференции «WebCamp 2015: Front-end Developers Day», прошедшей 4 июля в Одессе.

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

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

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



Комментарии (19)


  1. Delka Автор
    07.07.2015 13:25
    #8489471

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


  1. limonte
    07.07.2015 17:23
    #8489789
    +3

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


  1. Delphinum
    07.07.2015 22:07
    #8490165
    +1

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

    .block .element {
}

    хуже:
    .block__element{
}


    1. vithar
      07.07.2015 22:18
      #8490173
      +1

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


      1. Delphinum
        07.07.2015 22:22
        #8490181
        +1

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


        1. vithar
          07.07.2015 22:46
          #8490213
          +2

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

          .menu
    .menu__item
        .list
            .list__item


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


          1. Delphinum
            07.07.2015 22:55
            #8490219

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

            .block__item{
}


            1. vithar
              07.07.2015 22:59
              #8490223
              +1

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


              1. Delphinum
                07.07.2015 23:00
                #8490225

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


                1. vithar
                  07.07.2015 23:08
                  #8490231
                  +1

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

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


                1. vithar
                  07.07.2015 23:09
                  #8490235
                  +1

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


                  1. Delphinum
                    07.07.2015 23:15
                    #8490241

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


                  1. nomn
                    08.07.2015 13:20
                    #8490913

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


                    1. Polyuretan
                      08.07.2015 13:32
                      #8490925
                      +1

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


      1. Delka Автор
        08.07.2015 00:07
        #8490297

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


    1. vanxant
      07.07.2015 23:00
      #8490227

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


      1. Delphinum
        07.07.2015 23:02
        #8490229

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


      1. vithar
        07.07.2015 23:11
        #8490237
        +2

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


      1. Aingis
        08.07.2015 00:29
        #8490325

        Это далеко не самая тяжёлая штука для браузеров, проверяется только специфичный класс, проверка несложная, да ещё движки оптимизируют кейс селектора вложенности (по крайней мере ходили слухи). Можно написать куда более тяжёлые селекторы, но заметить даже их влияние можно будет только на огромных страницах с большими таблицами стилей или в сложных случаях динамических действий на страницах, где нужно очень много пересчётов стилей.

        P.S. Каскад — это принцип применения селектора в зависимости от специфичности, порядка применения и прочего.