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 {}
Еще стоит подумать на тем, что логотип может быть не только в шапке, т.е. он может потребоваться в другом контексте, значит его следует реализовать самостоятельным блоком (подробнее об этот тут
«Как в принципе отличать, где блок, а где элемент?»).