БЭМ блок - это компонент, который можно перенести в любое другое место на сайта и он не потеряет свою актуальность. Например карточка товара. На скриншоте выше Вы можете видеть 3 карточки товара - 3 БЭМ блока. Многие начинающие не хотят создавать кучу scss файлов и поэтому делают БЭМ блоком внешний контейнер в котором заголовок "Хиты продаж" и 3 карточки товара делают элементами.
По хорошему нужно каждую карточку товара сделать БЭМ блоком, а внешние обертки - это уже другой блок. Заголовок стараться делать h1 - h6.
Отдельного упоминания заслуживает именование.
.left-menu - плохое название. Пускай оно и характеризует каким-то образом блок, но 2 слова в названии приведут к минимум 3 словам в элементе - например left-menu__title и минимум 4 словам в модификаторе элемента - left-menu__title_big. Учитывая что модификаторы сами по себе не используются, а лишь модифицируют что-то, то получаем в элементе с модификатором минимум 7 слов.
Я считаю гораздо лучшим подходом именовать строго 1 словом элементы и блоки. Например prod, product, work, output итп частые имена для карточек продукта у нас уже заняты. Заходим в поисковик и ищем синонимы.
Как видим 46 вариантов легко нам нашло и не нужно выдумывать ерунду вроде main-product или right-prod.
Аналогично и для элемента стараемся 1 словом характеризовать и его.
Многие фреймворки вроде tailwindui и zurb foundation предоставляют возможность классами добавлять паддинги, маржины, размеры текста, позицию итп.
Но в данном случае маржины и выравнивание align-middle стоят на элементе advant__right и по факту гораздо лучше будет поставить эти маржины и выравнивание стилями на advant__right.
Отдельное удобство, что при адаптации сайта для мобильных не придется добавлять еще кучу классов вроде sm:margin-top-5 итп. В данном случае у нас есть уже элемент, на который мы можем повесить стили для адаптива.
margin-top-5 итп классы конечно имеют место быть и иногда они здорово экономят время, но лишь в ситуациях, когда у нас данный блок или элемент не проименован и мы не хотим тратить время и давать ему имя ради какого-то одного css свойства.
Еще частая ошибка. .button.subadv__button элемент и блок одновременно. Нужно button.button_sub например делать. Тогда эту кнопку возможно будет переносить в любые другие места и не будет казусов с попытками найти стили. А где же они лежат? В button.scss или в subadv.scss? Делая кнопку четко блоком с нужными модификаторами мы потом точно знаем, что ее стили лежат в button.scss (файлики стилей называют как имена БЭМ блоков).
