Html верстка по flexbox и БЭМ?

Question

[Denis__Web__1]

Я немного запутался во вёрстке с использованием Flexbox и методологии БЭМ.

В частности, я не совсем понимаю:
какие классы правильно писать,
как их называть по БЭМ,
как правильно «заворачивать» блоки в HTML.

Сейчас у меня получается довольно слабо в плане HTML-структуры, но я хочу разобраться. Вот пример кода, который я пока написал (это единственное, что хоть немного понимаю). Учусь по блогу «Фрилансер по жизни»:

<div class="wrapper">
    <div class="header">
        <div class="content">
            <div class="container"></div>
        </div>
    </div>
</div>

Можете подсказать, как правильно построить структуру и классы по БЭМ в таком случае?

Comments

[Ankhena]

Сначала нужно отредактировать вопрос. Нормально отформатировать, обернуть код в тег <code></code>, чтобы он не исчезал и убрать информацию о том, что вы себя считаете разработчиком.

[Ankhena]

как правильно построить структуру и классы по БЭМ в таком случае?

В каком таком?
Обычно к этой фразе показывают скрин.

Пока у вас в коде одни блоки и всё. И не очень понятно, чем они вас не устраивают, если таковыми и являются.
Абстрактно, по крайней мере одна из оберток вообще лишняя.

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

Дальше имеет смысл запомнить, что БЭМу наплевать флексы у вас там или нет. Это же не Tailwind.

[Denis__Web__1]

хабр не пускает пример кода

[Denis__Web__1]

хабр не пускает пример кода

[Ankhena]

Denis__Web__1, используйте кнопки редактора или оберните код в теги <code></code>