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

    delphinpro
    @delphinpro
    frontend developer
    Без привязки к макету у вас там просто блоки по сути.
    Но, допустим вот такая структура:
    <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 классов для имитации модульности, избежания конфликтов и упрощения поддержки.
    Ответ написан
    Комментировать