Привет)
Вообще БЭМ это совокупность: организация структуры кода, как html, так и css. Так же организация папко-файлов)
Сама суть в том, чтобы ты мог взять кусок твоего кода и использовать его и в других файлах
Смотри, если вот этот блок
<div class="ingredients__number">05</div>
тебе понадобится на другой странице
то обязательно нужно его вкладывать в родительский блок:
<div class="ingredients">
<div class="ingredients__number">05</div>
</div>
И стили соответственно писать нужно будет
.ingredients {
position: relative
}
.ingredients ingredients__number {
position: fixed
}
И вот если ты всё остальное (стилизация и папки и файлы и их названия, структура) будешь соблюдать, тогда да - твой БЭМ правильный))
Что делать с адаптивом?
Посмотри сетку bootstrap а именно на каких они точках делают медиа запросы, и тоже используй эти точки и да, под них менять процентные размеры или флексы использовать или еще что-то, это уже творческая работа, смотря что проще, смотря какой макет, идея)))
В общем, удачи)
