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

Изучайте методологию БЭМ. Сам БЭМ более чем актуален, а вот инструментарий меняется, в частности BEMJSON, i-bem.js и прочие технологии это по большей части используется только внутри яндекса.

Надо смотреть дизайн, чтобы более точно сказать как лучше, но в любом случае вы делаете не правильно.
Задавайте короткие лакончиные названия, если у вас это не получается, значит вы свернули не туда.
Чтобы получалось дробите блоки на более мелкие блоки.
Вместо этого ужаса communication__forms-wrapper-create-recall-form-buttons-send создайте отдельно блок кнопку button или любое другое не зарезервированное название. Кнопку вы можете модифицировать так button_clear button_send, хотя лучше конечно дать более общее название или вообще делить по типу например button_type_1 button_type_2. Затем если в контекте кнопка другая используте микс

<button class="communication_button button button_type_1">Очистить</button>

Очень аккуратно и понятно

то же самое с формой, создайте блок form и используйте как независимую структуру в нужном месте.

ну и вообще вы только вдумайтесь у вас есть якобы элемент communication__forms-wrapper-create-recall-form и вы наследуетесь от него все глубже и глубже communication__forms-wrapper-create-recall-form-name так нельзя делать, вы косвенно пытаетесь делать элемент элемента, каждый элемент должен наследоваться от блока и редких случаях можно немного разбавить связями по типу el__price el__price-old el__price-new

Блок_модификатор_значение

button_theme_ghost
button_size_small

<button class="button button_theme_ghost button_size_small">

Никакого reset.css , максимум normalize и то переделать так, чтобы не повышать специфичность
Ни в коем случае не применять стили ко всем элементам body * , мало того что ко всем элементам, так еще и вложенный селектор повышающий специфичность.
По разметке более-менее, но вот кнопка это ужас какой-то:

<div class="button__wrapper">
                    <div class="button capab__more">
                        <a href="#">
                            <button class="button__btn">All Services</button>
                        </a>
                    </div>
                </div>

Да и вообще вы все теги "a" как-то недооцениваете, в первую очередь надо описывать их, навешивать на них классы и стили, равно как и button, а не делать кнопки из оберток этих тегов, это не тот случай

input__input у вас не вызывает сомнения?, тут было бы более уместно задать например вместо news-signup__form отдельный блок form, а еще лучше subscribe, а там уже и subscribe__input, subscribe__field, subscribe__button да что угодно и будет это красиво и просто.
Тоже самое с соц сетями, это отдельный блок должен быть, можно просто social и микс если надо footer__social
Вообще с футером тоже большие проблемы footer-main / footer-part / footer-part-company / footer-part-links / footer-part-contact это безумие какое-то, вы либо делайте отдельные блоки без привязки к футер, либо делайте их элементами футера

Ну если уж по БЭМ, то в данном случае не вижу смысла делать так section:nth-child(2n), это повышает специфичность, которую следует избегать., можно просто миксовать блок с классом который будет красить нужные блоки. В любой момент может понадобиться добавить еще какой-то блок, который например должен быть белым после белого и что тогда? Зато если будет отдельный класс, можно например сделать так, чтобы через админку устанавливать цвет любого блока..

Внешние отступы и позиционирование относительно родительских блоков необходимо делать при помощи модификаторов либо миксов. Модификаторами определяем базовые стили, миксами переопределяем стили в контексте текущего блока.

Никаких вложенных селекторов, если этого можно избежать, поэтому либо .nav__link--light/.nav__link--dark,
либо использовать css переменные:

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

Это совсем не БЭМ. У вас должно было получится что-то вроде этого:

<div class="main-container">
    <img class="main-container__picture" src="images/bg.png" alt="Background">
    <!-- main-container__block-1 block-1 - Это микс, блок который модифицируется элементом другого блока или другим блоком  -->
    <div class="main-container__block-1 block-1">
        <div class="block-1__content">
            <div class="block-1__text">
                <p>Your Title Goes Here Make It Long & Maybe 3 Lines</p>
            </div>
            <div class="block-1__buttons">
                <!-- block-1__btn btn - Это тоже микс  -->
                <div class="block-1__btn btn"><a class="btn__link" href="#">explore</a></div>
                <div class="block-1__btn btn"><a class="btn__link" href="#">Add to cart</a></div>
            </div>
        </div>
    </div>
</div>

возможно надо этот элемент сделать блоком, типо: list-headet или как?

Да, блоком, но не надо приплетать header. Блок должен называться таким образом, что-бы было понятно что он делает, а не где он расположен. А в последствии можно смиксовать блок, например:

<div class="header">
    <h1 class="header__title">Title</h1>
    <p class="header__desc">Description</p>
    <ul class="header__list list">
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
      <li class="list__item"><a href="#" class="list__link">link</a></li>
    </ul>
  </div>

Если это позиционирование надо менять именно в конкретном блоке и больше повторять не будет, то можно миксовать так:

<div class="main-block__title welcome__title"></div>

В css блоки которые находятся внутри, должны быть записаны выше чем блок родителя, в такой последовательности миксы делаются легко. Если же у вас блок родитель идет
раньше и стили надо переопределить, тогда в вашем случае будет лучше использовать модификатор.

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

Чтобы помочь вам разобраться нужно видеть дизайн и понимать контекст проблемы, а то что я вижу в вашем наименовании это какая-то тавтология от которой у новичков и возникает неприязнь к БЭМ

Как бы вы отнеслись к решению, оставить спан без класса и обратится к нему по тегу, через класс родителя?

Только потому что вы не можете продумать название или структуру? Очень плохо.

я в последнее время избегаю давать такие имена, типо item-title )

И правильно делаете, то что вам предложили это дичь полная, блоки и элементы БЭМ не должны быть прилагательными и отвечать на вопрос какой, какая, какие и т.д.. это работа модификаторов.

А теперь по делу. Если взять за основу вашу разметку, то тут несколько вариантов. Например проработать структуру. Вам правильно подсказали вы в цену обернули и цену и вес, а значит вы явно что-то делаете не так. Ваш код может быть таким:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__price">200 руб.</span>
    </p>
</td>

И можете без проблем модифицировать любой элемент.

Еще возможны миксы с классами отвечающими за цвет, у вас может быть заранее определены классы с конкретными цветами, которые повторяются в макете:

<td class="table__col shop-col">
    <p class="shop-col__info">
        <span class="shop-col__weight">1,2 кг</span>
        х
        <span class="shop-col__new-price color-accent">199 руб.</span>
        <span class="shop-col__old-price color-grey">200 руб.</span>
    </p>
</td>

.header-top и .header-lower

Так лучше не делать. Старайтесь не использовать прилагательные. Смысл БЭМ в переиспользовании и то что сегодня было вверху, может оказаться внизу и наоборот, после таких преобразований, когда top окажется где-то в центре как минимум возникнет диссонанс.
Логичнее вынести в 2 независимых блока, прекрасно подойдут названия такие как panel, bar, info, navigation, если хотите зарезервировать эти имена для других целей, то можно использовать префиксы и сочетания ibar, i-bar, info-panel. Оба эти блока можно обернуть в единый header и миксовать class="header__panel panel", хотя я бы их полностью разделил, так как верхняя панель, явно может быть переиспользована где-то в футере.

2) Есть любой блок, у которого структура по своей сути - это container > row > col*(items). Как лучше её организовать с т.з. БЭМ?

Тут нужно видеть с чем работать, но в таком контексте лучше использовать микс:

<div class="news">
  <div class="news__container container">
    <div class="news__row row">
      <div class="news__item">
        <!-- контент -->
      </div>
    </div>
  </div>
</div>

Таким образом мы можем модифицировать row и container в контексте необходимого блока и понимать назначение классов.

Второй вариант более правильный, но вы вложили в него неправильный смысл, вы косвенно привязали main-nav к контексту main и это очень заметно в 3-м примере, где вы эту проблему гиперболизировали, 3-й пример ужасен, никогда так не делайте. 1-й пример правильный по именованию, но не всегда будет правильный по структуре, так как навигация это скорее всего отдельный блок. В результате более правильно, коротко и лаконично будет примерно так:

<div class="main">
  <nav class="main__nav nav">
    <ul class="nav__list">
      <li class="nav__item">
        <a href="#" class="nav__link">Home</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">Work</a>
      </li>
      <li class="nav__item">
        <a href="#" class="nav__link">About us</a>
      </li>
    </ul>
  </nav>
</div>

Вам правильно сказали про миксы, но более правильно делать элемент-модифиткатор с названием блока к которому миксуем, то есть main__nav nav и если делать микс по вашей схеме, то получится вот такая тавтология main__main-nav main-nav, а если сделать 2 микса (что иногда тоже бывает) в 3-ем примере, то становиться плохо main__main-nav-list main-nav__main-nav-list main-nav-list и возможно на таком примере вам станет более понятено, почему не надо так делать и какую задачу решает БЭМ

каждый пишет как ему удобно?

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

В целом вы правильно мыслите, но пришли немного к неправильному выводу.

- Миксы лучше использовать для позиционирования блока либо модификации блока в контексте другого блока. Например у нас есть contacts и помещая его в header, даже если ничего не менять, желательно сразу задать ему header__contacts потом может пригодиться.

- Если необходимо менять элементы блока внутри контекста другого блока, блока то можно миксовать элементы. Например: contacts__img header__contacts-img немного тавтология, но в небольших порциях уместно

- Но если модификации могут быть неоднократными, то нужно модифицировать сами элементы: contacts__img contacts__img_type_1, тут уже нужно смотреть на контекст проблемы, например если у вас иконка и она где-то слева и где-то справа, то можно задать ей правила с отступами слева и с права в независимости от того какой тип блока: contacts__ico_margin-right_small или contacts__ico_margin-left_large. Это модификатор КЛЮЧ-ЗНАЧЕНИЕ где в ключе мы указываем что у нас существует отступ _margin-left и такой отступ может быть только один, а значение, это размер отступа _large

Придерживаясь правил выше можно полностью решить практически любую задачу, но и такое иногда приходиться применять .card_type_1 .card__img, но обычно это хотелки заказчика/бекендщика, мол хочу чтобы я добавил класс и все изменилось, тут как бы выбора не остается.