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>

Answer 1

[Сергей delphinpro]

Без привязки к макету у вас там просто блоки по сути.
Но, допустим вот такая структура:

<div class="wrapper">
    <div class="header"> <!-- блок header -->
        <div class="header__content"> <!-- элемент блока header -->
            <div class="container"></div>
        </div>
    </div>
    <div class="main">
        <div class="container"></div>
    </div>
    <div class="footer">
        <div class="container">
            <div class="footer__logo"></div>
            <div class="footer__main"></div>
            <div class="footer__links"></div>
        </div>
    </div>
</div>

wrapper - самостоятельный блок, может иметь такие стили:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

В свою очередь, может понадобиться растянуть средний блок на всю доступную высоту, тогда он будет элементом блока wrapper

<div class="wrapper">
    <div class="header">  ... </div>
    <div class="wrapper__main main"> <-- Блок main и одновременно элемент враппера -->
        <div class="container"></div>
    </div>
    <div class="footer"> ... </div>
</div>

.wrapper__main {
  flex-grow: 1;
}

Дальше блок footer - тоже вполне себе самостоятельный.
Он в свою очередь может иметь внутренние элементы

<div class="footer">
    <div class="container">
        <div class="footer__logo"></div>
        <div class="footer__main"></div>
        <div class="footer__links"></div>
    </div>
</div>

Обратите внимание, что "в середине" блока вклинился другой блок - container. Это вполне допустимо! Вложенность БЭМ не обязательно должна соответствовать вложенности DOM.

Если вам здесь нужно для container добавить какие-то другие стили в контектсе footer, то делаете его элементом footer. Например, нужно выстроить элементы подвала в ряд:

<div class="footer">
    <div class="footer__container container">
        <div class="footer__logo"></div>
        <div class="footer__main"></div>
        <div class="footer__links"></div>
    </div>
</div>

// общие стили контейнера (например центрирование)
.container {
  max-width: 1000px;
  margin-inline: auto;
}
// стили контейнера в подвале
.footer__container {
  display: flex;
  justify-content: space-between;
}

И последнее: не нужно связывать flexbox и БЭМ =). Первое - это технология раскладки элементов, второе - это система именования css классов для имитации модульности, избежания конфликтов и упрощения поддержки.