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

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

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

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

Героя ждали и он пришел нежданно.

БЭМ необходимо знать достаточно, чтобы уловить концепцию и разбираться в спорных моментах. Я собрал большой материал тут под расширение примерами и уточнений.

В примере несколько вещей не очень:
1. Пустой тег header. Т.е. незаполненный классом.
2. Как в принципе верно подметил g33km нормой считается вкладывать в тег списка, потому что многоуровневую навигацию так проще оформлять за счет прослоек.
3. Но наличие пустых тегов тоже идет вразрез БЭМ-у, так как для вложенных элементов должны быть классы, которые позволяют ими управлять. Инкапсуляция классами предполагает отстраненность от тегов, хотя и и приходится на всякий случай (а для списком в обязательном порядке) обнулять отступы и т.д.
4. То, о чем говорит в своем ответе g33km:

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

глупость, так как это обыкновенный микс. Он нужен для того, чтобы определить местоположение блока навигации в блоке шапки.

Итого, если не сильно шатать трубу структуру, то данныый код может выглядеть следующим образом:

<header class="content-header">
    <a 
        href="/"
        class="content-header__logo logo">
        <img 
            src="/img/logo.svg" 
            class="logo__image"
            alt="">
    </a>
    <nav class="content-header__nav nav">
        <ul class="nav__list nav__list--inline">
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
        </ul>
    </nav>
</header>

...

<footer class="footer">
    <nav class="footer__nav nav">
        <ul class="nav__list nav__list--column">
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
            <li class="nav__item"><a href="" class="nav__link"></a></li>
        </ul>
    </nav>
</footer>

Подвал я указал для образца, как этот блок может быть использован «ниже на странице».

По логике базовый стиль должен обнулять нативные отступы, формировать базовые потребности (можно добавить еще и nav--white, чтобы покрасить в шапке в белый цвет, а в подвале нет (базовым цветом может быть черный у ссылок).

Ну и в принципе чуть больше можно почитать в моей новоявленной документации. Только вчера закинул в интернеты, дорабатываю и буду рад любым вопросам по этой теме. Контакты есть в профиле, врядли отвечу, но самые интересные образцы скорее всего пойдут на доброе дело.

.main
→.main__sidebar
→.main__content
→→.link
→→.elem
→→→.elem__title
→→→.elem__content

1. Названия должны быть понятными. Без самой верстки перед носом.
2. У тебя тут row-space--between хрень, кажись, если я правильно понял, должно быть так row--space-between

Если есть возможность, используй модификатор для дочернего элемента блока юзер.
Если ты собираешься существенно изменить свойства блока — создавай новый блок. Чтобы в будущем не оказаться в ловушке у кода.
Можешь сделать обращение напрямую к блоку изображения (да, надо, чтобы изображение в таком случае тоже было блоком. Атомарность етить ее)., либо просто к изображению.

В целом первый вариант предпочтителен. Так как остальные могу спокойно привести не туда. Хотя первый и приведет к добавлению кода везде.

А твой вопрос в документации тут, в рубрике «как хотите, так и еб...» (На сайте не пашут анкоры, так что просто глянь, что в адресной строке и докрути).

Впрочем, в целом, такое обычно делать и не приходится. Жестко так миксовать в смысле. В этом и заключается принцип БЭМ, «взболтать, не смешивать».

1. Объявлять связи по БЭМ нужно жестко .social__btn в примере может быть использовано в другом месте, вне родителя, это не по БЭМ-у. Надо в css указывать явно .social .social__btn ....
2. Остальное вроде корректно, но лично я бы так не делал.
3. Еще есть примеси, которые актуальны в «подвале переопределить», но в данном случае так, как модификаторы по сути своей разные, этот вопрос некорректен, и данный метод не подходит. Тут просто 2 абсолютно разных модификатора, один красит в белый, другой в фиолетовый.

PS: Модификаторы тоже должны иметь явную привязку к родителю, а не указываться отдельно.