Как будет правильно по правилам БЭМ использовать повторяющийся элемент?

Question

[Norum]

Если у меня в макете есть повторяющийся элемент-логотип в header и footer (причем в подвале он больше, чем в хэдере), то правильно будет сделать каждый логотип отдельно? Я имею ввиду для хэдереа прописать <a lass="header__logo" href="#"></a> и для футера <a lass="footer__logo" href="#"></a>
или же добавить микс logo к хэдеру и футеру и потом у футера изменить размер картинки? То есть <a lass="header__logo logo" href="#"></a> и
Тоже самое с меню: в хэдере и футере одинаковое меню, только разное расположение и цвет, как поступить?

Answer 1

[Виталий Першин]

Оба варианта приемлемы.
Второй вариант почти всегда подходит. Я обычно делаю отдельного logo и у меня стили с картинками для лого лежат в отдельной папке logo, а там уже либо в зависимости от контекста делаю микс header__logo footer__logo, либо модификатор, например для уменьшенной копии можно сделать logo_size_small
А в случае если лого относится только к конкретному блоку, то можно без проблем сделать его элементом, одно другому в таком случае не помешает никак.

Answer 2

[Арсений Матыцин]

Если лого имеет какую-то стилевую нагрузку, например это svg, который управляется по цветовой схеме и т.д., т.е. это действительно самостоятельный блок, а не картинка в теле другого блока, то такие вопросы решаются как раз миксом.

Блок логотипа описывает поведение исключительно логотипа, а класс-элемент родителя, в котором он находится задает отступы и вполне может регулировать размеры блока. В свою очередь поведение логотипа в разных размерах должно быть описано, хотя бы max-width: 100% для изображения.

Модификаторы в этом случае не нужны, их оптимальнее использовать для других случаев, например покрас того же svg в черный или белые цвета, чтобы на фоне родительского блока выглядело контрастно.