каком файле мы прописываем стили для .wrapper ? Поскольку это не блок, я так понимаю, что создавать файл не надо и стили надо прописывать просто в начале main.scss ?
Почему не блок? Он вполне может быть блоком без смыслового функционала. Оберточный. Так же через него, через его элементы позиционируются вложенные в него блоки.
2) В каком файле прописывать стили для header, footer, section-1, section-2 ? Они не являются блоками по БЭМ, насколько я понимаю, значит ли это что их надо описывать в main.scss или все таки надо создавать отдельный файл под стили для каждой секции ?
Если вы имеете ввиду теги, то это не одобряется БЭМ. БЭМ оперирует только классами. теги стилизуются через них же. Это сделано для атомизации проекта и легкого переноса блоков из проекта в проект.
Если нам надо изменить это свойство у одного блока, соответственно придется менять и у всех остальных, находящихся в section-1.
Блоки не должны влиять друг на друга, это основопологающая идея БЭМ. Если блоки связаны или влияют друг на друга это уже не БЭМ, а что-то похожее на него. Так же внутри блока следует избегать использования каскада и наследования, это может внести дополнительную путаницу и увеличить
связанность блока.
Придется лезть в файл каждого блока и менять свойства, что не слишком удобно, особенно если блоков много
Это вполне удобно и это и есть БЭМ. Ты не лазишь по огромному файлу со стилями, а идешь в маленький конкретный файл где все находится перед глазами.
это не спасает нас от огромного дублирования кода
От дублирования кода спасают
миксы. Читайте про них
здесь
5) Правильная практика - помещать все медиа запросы, относящиеся к блоку в файл с версткой этого блока, или должен быть отдельный файл под все медиа -запросы ?
медиа-запросы изменяющие геометрию блока должны находиться в родительском блоке в его элементах. Сам блок не может изменять свою геометрию за это отвечает файл стилей элемента родительского блока. Соответственно, если мы будем изменять размер блока через медиа запрос, то это делается через элемент родительского блока.
<head class="head">
<div class="block head__block"> </div>
</head>
Соответственно блок класса .block c примиксованным классом .head__block является элементом блока .head и можно менять его геометрию и позиционирование через класс .head__block используя медиазапросы например. Естественно элемент head__block с медиазапросами будет храниться в блоке head и лежать в его подпапке с элементами.
Другой случай это когда через медиа запросы меняется например стиль блока, скажем его цвет. Тогда медиа запрос должен быть внутри блока, а конкретно в его модификаторе например в данном случае у блока block может быть модификатор block_red в котором будет медиазапрос со свойствами при маленьком экране окрашивать элемент в красный. Этот файл с медиазапросами уже будет находиться в родном блоке block в подпапке с модификаторами.
Если где-то не согласны или я ошибся пишите в комментарии обсудим.