Верстка по BEM. Файловая структура. Как присваивать классы независимому блоку?

Question

[avprinciple]

Структура папок

/src
  /blocks
     /header
     /logo

Файл logo.html в отдельной папке logo (block).

<div class=logo>
  <img class="logo__image" src='/'>
</div>

Этот независимый блок logo - нужен в header.html
Я подключаю через Gulp-plugin в файле header.html

<div class=header>
  <h2 class="header__title"></h2>
  @@icnlude('../blocks/logo/logo.html')
</div>

И тут, например, нужно чтобы в header, logo выглядело немного иначе. То есть миксую класы, добавляю .header__logo =

Но добавляю я этот класс (header__logo) в папке - независимому блоку "logo".
Потому что в файле header.html, я просто импортирую logo.

<div class="logo header__logo">
  <img class="logo__image" src='/'>
</div>

А если logo нужен в footer, в footer-e свои классы, я добавлю .footer__logo =
Опять же я добавляю класс в файле logo.html

Это неправильно, так как они - классы (их стили) будут конфликтовать.
И как тогда правильно делать? Копировать код из папки/блока logo и вставлять уже в header.html / footer.html / any.html, и уже им присваивать нужный класс?
Или в scss/css писать:

.header .logo {
  logo style for header
}

.footer .logo {
  logo style for footer
}

Как верно?

Comments

[Сергей delphinpro]

Вы используете bem-tools?

Answer 1

[Alex Karo]

Дисклеймер: Я не гуру БЭМа и давно не заглядывал в их доки. Данные стоит перепроверить.

На мой взгляд, есть 3 варианта, которые не противоречат методологии:
1) Кладем .logo внутрь элемента .header__logo, стилизуем header__logo. Всё просто, не требует ничего специального.
2) Вешаем .header_logo на .logo . Шаблонизатор (в данном случае - галп плагин) должен уметь прокидывать пропсы к подключаемым файлам, т.е. должно выглядеть типа `@include('../blocks/logo/logo.html', {"className": "header__logo"})`. По БЭМу блок может быть элементом другого блока
3) Переопределяем стили типа `.header .logo`. БЭМ, насколько я помню, тоже позволяет переопределять стили в зависимости от контекста.
4) Делаем модификатор, например `logo--highlited`, который уже стилизуем в рамках блока. Так же шаблонизатор должен это уметь.

Единственно-правильного способа, как мне кажется, нет.
Для позиционирования я, обычно, применяю 1-й способ. Для изменений стиля/цветов только в данном конкретном контексте - 2 или 3.
Если изменение требуется не только в контексте одного блока, а где-то еще - то 4.

Comments

[avprinciple]

2 вариант - это то, что нужно, но {"className": "header__logo"}) это не работает :(

[Сергей delphinpro]

avprinciple, начните использовать шаблонизатор.

На примере twig это делается так:

{% include 'blocks/logo/logo.twig' with {className: 'header__logo'} %}

И в шаблоне логотипа

logo.twig

<div class="logo {{ className }}">
  ...
</div>

Answer 2

[Толстый Лорри]

Вообще-то блоки независимы именно потому, что они должны выглядеть одинаково в разных частях страницы. Если блок должен иметь какой-то особый внешний вид "по месту", то это должны быть разные блоки. БЭМ не допускает селекторы вида: .блок1 .блок2 {...}

Если сам блок допускает какие-то режимы своего отображения (скажем, раскрывающееся меню может раскрываться в разные стороны), то это может задаваться с помощью БЭМ-модификаторов блока, но не снаружи.

Comments

[Alex Karo]

Судя по этому пунту документации - БЭМ это допускает
https://ru.bem.info/methodology/block-modification...

[Толстый Лорри]

Александр, там есть предупреждение о том, что делать так без острой нужды не рекомендуется. Такой необходимости у ТС, очевидно, нет.