Как назвать класс в BEM?

Question

[OGuman]

У меня есть логотип. В шапке он маленький, а в подвале больше.
Вот он в шапке:

<div class="logo">
      <img src="img/logo.svg" alt="logo">
 </div>

Как с точки зрения BEM лучше будет назвать класс?
Так

<div class="footer__logo logo">
      <img src="img/logo.svg" alt="logo">
 </div>

или так?

<div class="logo logo_footer">
      <img src="img/logo.svg" alt="logo">
 </div>

Answer 1

[Realetive]

<header class="header">
  <div class="header__logo">
    <img class="logo logo_size_m" />
  </div>
</header>
…
<footer class="footer">
  <div class="footer__logo">
    <img class="logo logo_size_l" />
  </div>
</footer>

Comments

[litury]

А для чего нужна дополнительная обёртка footer__logo и header__logo?

[OGuman]

litury, потому что родительский блок с flex карежит img

[OGuman]

litury, или они лишние все таки? я любой img оборачиваю

[litury]

OGuman, ну так можно inline-flex сделать. Мб для того что бы задать отступы логотипу через обертку?

Крч нужен ответ автора, призываю Realetive

[Realetive]

Для отступов. Можно, конечно, смиксовать:

<header class="header">
    <img class="logo logo_size_m header__logo" />
</header>
…
<footer class="footer">
    <img class="logo logo_size_l footer__logo" />
</footer>

но новичков в БЭМ миксы иногда больше запутывают. Нет смысла «экономить» на вложенности — объединяйте сущности (logo + header__logo и logo + footer__logo) на одной DOM-ноде только тогда, когда уверены, что результат будет идентичным как и при «обёртке».