@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 {

        }
    }
}
  • Вопрос задан
  • 356 просмотров
Решения вопроса 2
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer
Нет, неправильно.
БЭМ нужен во избежание вложенностей. Правильно так
.header {
    $parent: &;
    &__top {

    }

    &__logotype {
    }
    #{$parent}_link {

    }

     #{$parent}_image {

    }
}


UPD:
Короче говоря по бэму должно быть в scss что-то вроде этого.
Хотя тут svg - не по БЭМ, но это потому что при подгрузке новых svg я не хочу залазить в каждый и добавлять класс элемента.
202dde9b517b4c14a14b903942b6c9a1.png
Ответ написан
@ilyarsoftware
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 {}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы