Правильно ли писать так (бем)?

Question

[WQP]

Собственно сабж

Разметка

<!-- .header -->
<section class="header">
    <div class="container">
        <div class="header__top">
           <div class="header__logotype">
               <a href="#" class="header_logotype_link">
                   <img src="_tmp/logotype.png" alt="Casino" class="header_logotype_image">
               </a>
           </div>
        </div>
    </div>
</section>
<!-- /.header -->

scss

.header {
    &__top {

    }

    &__logotype {
        &_link {

        }

        &_image {

        }
    }
}

Answer 1

[Никита Кит]

Нет, неправильно.
БЭМ нужен во избежание вложенностей. Правильно так

.header {
    $parent: &;
    &__top {

    }

    &__logotype {
    }
    #{$parent}_link {

    }

     #{$parent}_image {

    }
}

UPD:
Короче говоря по бэму должно быть в scss что-то вроде этого.
Хотя тут svg - не по БЭМ, но это потому что при подгрузке новых svg я не хочу залазить в каждый и добавлять класс элемента.

Comments

[Никита Кит]

Вот тебе мои примеры - все на БЭМ
russtranslogistic.ru
ntpo-vektor.ru
dropcogs.pro/studio

[i]

Никита Кит: подскажи для какого препроцесора пример? и в чем разница #{$parent}_link vs &_link?

[Никита Кит]

Илья Рогов: scss препроцессор.
Суть в том, что & - это прямой родитель. Если ты сделаешь вложенность, подобно той ереси что ты написал, в результате нативный код будет выдавать селекторы типа .header__logotype__link. Вообщем подумай немного и пойми, зачем амперсанд сохранять в переменную.
За тем же, за чем и this сохраняют в переменную.

[i]

Никита Кит: Спасибо за ответ, но все таки на мой вопросы это не отвечает. Поясните где я пишу про .header__logotype__link? Вы об этом:

.link {
    &_type {
       &_header {}
    }
}

То на входе будет:

.link {}  /* общая реализация блока link */
.link_type_header {} /* модификатор блока link с названием type и значением header */

[Никита Кит]

Илья Рогов: .link_type_header - это не БЭМ. Это ты на своей волне.
Сначала почитай что такое БЭМ и зачем он вообще нужен. И зачем амперсанд в переменную сохранять - тоже почитай. А потом уже применяй.

[i]

Никита Кит: Я с удовольствие почитываю про амперсанд, пожалуйста поделитесь ссылкой.

[i]

Никита Кит: Прошу поясните, я правильно вас понял: <button class="button button_size_s">...</button>это не про БЭМ?

[Никита Кит]

Илья Рогов: https://www.sitepoint.com/sass-features-may-never-...
3й и 4й пункты - самый сок. 4й по теме, а с помощью третьего можно добиться очень хорошей скорости обработки стилей. Я даже об этом писал тут
dropcogs.pro/module-developing-solution.html

[Никита Кит]

Илья Рогов: нет, всё таки впервые я тут это вычитал.
А применить в бэме уже несложно.
mikefowler.me/2013/10/17/support-for-bem-modules-s...

[Никита Кит]

Илья Рогов: Если ты пишешь БЭМ на препроцессоре, значит модификаторы тобой будут крафтиться и наследоватья через --
то есть

<button class="button button--button_size_s">...</button>

В стилях будет

.button{
&--button_size_s
}

2й способ наследования этой sass конструкции БЭМ, это через %.
У нас есть где-то в миксинс:

%button{
&--button_size_s{...}
}

В разметке это, скажем вообще ссылка с другим классом

<button class="header__link">...</button>
<code>
к примеру.
В scss будет наследоваться с модификатором так:
<code>
.header{
   $parent: &;
   #{$parent}__link{
      @extend %button;
      @extend %button--button_size_s
    }
}
<code>
Как видно на данном примере - с помощью Scss ты минифицируешь не только стили, но и разметку.

Доки на бэм инфо написаны для применения в нативном css - не стоит забывать.

[i]

Никита Кит: Спасибо за ссылки. По модификаторам: "...значит модификаторы тобой будут крафтиться и наследоватья через --" два минуса для модификаторов это про БЭМ и важно понимать что это просто альтернативная нотация. Эта нотация распространилась благодаря Гари Робертсу и для западных разработчиков два минуса дефолтно.

Классическая нотация использует именно "_" для модификаторов т.е.: block-name_mod-name_mod-val - модификатор блока, block-name__elem-name_mod-name_mod-val - модификатор элемента, это из официальной документации.

Какую использовать дело вкуса, в своем ответе я опирался на официальные источники.

[Евгений]

Никита Кит: Что за бред? Модификаторы пишутся либо через лоудэш, как это принятно в Яндексе, либо через двойной минус как обычно делают на западе, а вы тут совместили и то и то, это не БЭМ.

[Никита Кит]

Евгений: Вообще-то я пишу элементы блоков через двойной лоудэш, а модификаторы через двойной дефис - как принято на западе.
И это не бред. Все разделяют из так, как хотят. Я написал как мне проще и как совместить эту нэймификацию с scss и продуктивно уменьшить количество кода.

[Евгений]

Никита Кит: Я ничего не говорил про элементы блоков, а про пример который вы привели: ...

[Евгений]

Съело разметку: button button--button_size_s

[Никита Кит]

Евгений: в моём примере один лоудэш - это часть имени класса, а не конкретный разделитель. Блок__элемент--модификатор какбе.
К тому же я вообще не о названиях классов говорил. Я говорил о наследовании модификаторов через scss, для сохранения чистоты разметки.

[Никита Кит]

Евгений: button (класс блока) button--button_size_s (модификатор класса блока). И что тут неясного?
Вот ещё пример.
class: .page_content__inner_text.page_content__inner_text--shadowed

Блок page_content (абстрактно выше по вложенности)
Элемент inner_text (полное имя класса для применения стилей: page_content__inner_text)
Модификатор shadowed (полное имя класса для применения стилей: page_content__inner_text--shadowed)

Как я писал ранее - так разметка может засраться. Поэтому я часто наследую модификаторы через extend %

Answer 2

[i]

header_logotype_link и header_logotype_image модификаторы блока («ключ-значение», если следовать Соглашение по именованию), а используются как самостоятельные единицы, их задача отражать модификацию именно блока: <section class="header header_logotype_image">, но данном случае будет мало смысла.

Будет более верно для ссылки и картинки использовать самостоятельный блок, а для отражения специфичности модификатор, например:

<!-- .header -->
<section class="header">
  <div class="container">
    <div class="header__top">
      <div class="header__logotype">
        <a href="#" class="link link_type_header">
           <img src="_tmp/logotype.png" alt="Casino" class="image image_type_header">
        </a>
      </div>
    </div>
  </div>
</section>
<!-- /.header -->

.header {
    &__top {}
    &__logotype {}
}
.link {
    &_type {
       &_header {}
    }
}
.image {
    &_type {
       &_header {}
    }
}

Или использовать микс (на мой взгляд, такой подход поддерживать проще):

<!-- .header -->
<section class="header">
  <div class="container">
    <div class="header__top">
      <div class="header__logotype">
        <a href="#" class="header__link link">
          <img src="_tmp/logotype.png" alt="Casino" class="header__image image">
        </a>
      </div>
    </div>
  </div>
</section>
<!-- /.header -->

.header {
    &__top {}
    &__logotype {}
    &__link {}
    &__image {}
}
.link {}
.image {}

Еще стоит подумать на тем, что логотип может быть не только в шапке, т.е. он может потребоваться в другом контексте, значит его следует реализовать самостоятельным блоком (подробнее об этот тут «Как в принципе отличать, где блок, а где элемент?»).