Так я и предложил решение — удалить лишнюю зависимость. К БЭМ ни миксины, ни бутстрап отношения не имеют, аналогичный результат (даже лучше) можно получить и без них. Лучше решать такую «проблему».

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

https://codepen.io/evlgromov/pen/eYZmKoe

Зачем <div id="app"> ?

Javascript будет рендерит в app

Роман, в чём Вы видите аналогичный результат? Я использую сеточную вёрстку. Этот подход покрывает 98% задач. В 2% я руками пишу медиа-запросы и размеры блоков. Почему вопрос к БЭМ? Потому что решение данной задачи по-бэм имеет ряд особенностей.
1) введение в html дополнительных (лишних) сущностей - это противоречие методологии. Если мы на выходе будем иметь такое: <nav class="nav"><div class="row"><div class="row__col row__col_xl_6"><div class="nav__item">
2) мы можем добавлять классы к существующим элементам и тащить с собой весь css со всеми возможными вариантами (потому что автоматически ни gulp, ни enb не подцепит css из cls="row", cls="col col-xl-6")
<nav class="nav row"><div class="nav__item col col-xl-6">
3) можем, как Вы предложили, писать руками весь css для каждого блока типов row, col и т.д, а потом своими же руками это править. Изолированность отличная. Продуктивность хромает, но если платят по часам, то какая разница?
4) можем использовать lostgrid (теже миксины, вид сбоку. вопрос, зачем)
5) можем использовать миксины sass от того же bs или любые другие.
@include media-breakpoint-up(sm) {
 @include make-col(6);
}

Мой вопрос не в том, нужны мне миксины или нет. А в том, можно ли не  указывать импорты (в частности @import "mixins»;) во всех блоках, а вынести на уровень сборщика - чтобы в момент сборки, он знал, где искать указанные в css миксины.

сложнааааа. Слишком абстрагированно, неудобно ведь жонглировать кучей классов.

Как то бы научиться делать проще) Это первый раз

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

Я Вас не понимаю

тут есть момент вкусовщины, но я бы в куче мест вообще не выделял блоки. блок делал бы либо том случае, если внутри него много элементов, либо если он повторяется еще где-нибудь.
если схематично накидать разметку, я бы так сделал:

вообще слишком рано выделять блоки не нужно, имхо. в данной разметке на отдельный блок тянет только main (.page__main.main). Все остальное можно выделить в отдельные блоки только если они еще где-то повторяются.

Ну линки адекватно вынесены в блок

абстрактный класс link ? да, тут согласен.

🤯
Спасибо за помощь. Буду разбираться и упрощать. Нужно понять сам принцип.

разобрался. Вдруг кому пригодится. Сначала подключаются миксины в src, а затем пусть ищет всё остальное.
bundle.src('./common.blocks/mixins', 'css')
                   .pipe(sass)

Почему main тянет на отдельный блок объясните вкратце пожалуйста.

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

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

<footer class="page__footer">
 <div class="footer">
   <div class="footer__list">
     <div class="footer__links">
       <span class="footer__link-header">React</span>
       <a class="footer__link link" href="#">What is React?</a>
       <a class="footer__link link" href="#">Why React?</a>
       <a class="footer__link link" href="#">What's new in React?</a>
     </div>
     <div class="footer__links">
       <span class="footer__link-header">Vue</span>
       <a class="footer__link link" href="#">What is Vue?</a>
       <a class="footer__link link" href="#">Why Vue?</a>
       <a class="footer__link link" href="#">What's new in Vue?</a>
     </div>
     <div class="footer__links">
       <span class="footer__link-header">Angular</span>
       <a class="footer__link link" href="#">What is Angular?</a>
       <a class="footer__link link" href="#">Why Angular?</a>
       <a class="footer__link link" href="#">What's new in Angular?</a>
     </div>
   </div>
   <div class="footer__subscribe">

   </div>
 </div>
 <div class="footer__copy">
   <p>Copyright&copy;2020</p>
   <p>Created by Gromov</p>
 </div>
</footer>

На Ваш взгляд правильный ли подход?