Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?

Question

[SQLpodavan228]

Особенно часто стал сталкиваться с дилеммой где именно ставить вреппер, до или после дива со всем контентом? По логике, нужно ставить после вреппера, т.к потом нам надо с помощью паддингов отцентровать с нужными отступами от заданных размеров весь контент. Можете подсказать как можно оптимизировать код? И какие стили или функции можно еще добавить по вашему мнению с помощью только css? Ссылку на код опен прикрепляю

Comments

[Александр Васильев]

Я не вижу у тебя там БЭМ

[Ankhena]

0.

Правильно ли с точки зрения семантики БЭМ

Начнем с правды.
В коде нет ни семантики ни БЭМа.

1.

до или после дива со всем контентом?

Хотелось бы конкретный пример о чем вообще речь. Зачем враппер после контента?
Если под словом "после", вы имеете в виду снаружи секция, внутри обертка-центровщик, то именно так.
Удобно создать один класс хелпер для этого.

<section class="block">
  <div class="block__wrapper container">
    <h2 class="block__title"></h2>
    <p class="block__text"></p>
  </div>
</section>>

2. Вчера я вам говорила, что неверно подключены шрифты, три повторения. Всё так и осталось.

3. Про БЭМ.
Если начать как раз с семантики, то и блоки легче выделятся и их элементы тоже.
Секции делать section, хедер header, навигацию nav и т.д.

Сейчас у вас вместо БЭМ просто классы с __

4. nav__wrapper - нет родительского блока с классом nav.
И аналогичные ошибки.

5. Логотип это всегда блок. Его переиспользуют много раз.
И аналогичные ошибки.

6. nav__right - не лучшее название класса. Очень странно будет выглядеть такой блок, когда при адаптиве окажется под левым. Называйте по смыслу и назначению.
Если нормального названия не придумывается, то очень может быть, что эта обертка вообще лишняя. Сейчас именно так.

7. Очень много лишних оберток.
background__enjoy - задавайте фон секции.
Enjoy Your Morning Coffee. - этому достаточно одно тега h2. Вместо по крайней мере трёх div.
и аналогичные проблемы.

8. Ни поиск ни другие иконки не являются контентными изображениями, их можно смело убрать в стили. Вместо этого написать текст и доступно скрыть его. Гуглите visually-hidden.

9. <span class="number__card">01</span>
меняется на псевдоэлементы и ol (или ul, если в действительности порядок не важен)

Ещё почему-то меню у вас нумерованный список вместо маркированного. В нём что, поменяется смысл от перемены порядка?

Звезды в 5 тегов img это дичь.
-----

Хватит пока