Блок в элементе это правильно?

Question

[itgraine]

Здравствуйте!

Можно ли в верстке придерживаясь бэм вкладывать в элементы одного блока другие блоки?

Comments

[Ankhena]

Конечно можно.
Чаще всего при этом получаются миксы.

[Ankhena]

Подскажите такой код правильный по бэм если судить?

Логотип одновременно и элемент шапки и самостоятельный блок, потому что является самостоятельным элементом и не обязан находится в шапке.
Тоже самое с меню, иконками и т.д.
Иконки телефона, ватсапа и подобного должны быть ссылками с текстом, который можно доступно скрыть, а сами картиночки фоном или svg.

Answer 1

[ha100790tag]

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

Comments

[itgraine]

<!-- Header -->
<header class="header">
<!--    body-width Обертка задает ширину и magrin 0 auto-->
    <div class="body-width" >
        <!--    header__wrap-top Это flebox контейнер  -->
        <div class="header__wrap-top">
            <img class="header__logo" src="/img/logo.png" alt="Логотип">
            <nav>
                <ul class="menu">
                    <li class="menu__item">
                        <a class="menu__link menu__link_active" href="#">
                            Главная
                        </a>
                    </li>
                    <li class="menu__item">
                        <a class="menu__link" href="#">
                            Каталог
                        </a>
                    </li>
                    <li class="menu__item">
                        <a class="menu__link" href="#">
                            О нас
                        </a>
                    </li>
                    <li class="menu__item">
                        <a class="menu__link" href="#">
                            Услуги
                        </a>
                    </li>
                    <li class="menu__item">
                        <a class="menu__link" href="#">
                            Контакты
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="header__phone">
                <img src="/img/whatsapp.png" alt="" class="header__whatsapp-icon">
                <img src="/img/phone.png" alt="" class="header__phone-icon">
                <a href="tel:[phone]">8 (495) 999 99 99</a>
            </div>
            <img src="/img/user.png" alt="Пользователь" class="header__user">
            <div class="header__cart">
                <img src="/img/cart.png" alt="Корзина" class="header__icon-cart">
                <span class="header__quantity">
                    0
                </span>
                <span class="header__total-price">
                    122,000 ₽
                </span>
            </div>
        </div>
    </div>
</header>

Подскажите такой код правильный по бэм если судить? Одна обертка для ширины и выравнивания по середине в виде блока , а другая для flex элементов в виде элемента header.

[ha100790tag]

я не считаю, что могу считаться источником безоговорочной истины. Да и сам по себе БЭМ - это скорее набор рекомендаций, чем строгих правил. Выглядит логично и правильно, другое дело, что я не совсем согласен, возможно, с версткой блока телефона и цены, но я даже не знаю, что должно получиться в итоге и какое у вас в команде, если есть команда, соглашение о наименованиях, и вообще это совсем другая история... Кроме всего прочего важно не только то, как Вы назовете классы, но и какие стили на них будут висеть. Я сам в данный момент на проекте без БЭМа, потому врядли могу оценивать тк мог что-то и забыть. Мой единственный совет - не пожалейте пару часов прочитать доку и в результате вы и самому себе сможете ответить правильно или нет и другим подсказать.

[ha100790tag]

itgraine, кроме всего прочего

<!--    body-width Обертка задает ширину и magrin 0 auto-->
    <div class="body-width" >

если на блоке висит ограничение ширины и magrin 0 auto, то я на 99% вангую, что он не будет "body-width", а будет конкретно заданных размеров. обычно подобный блок называют просто container