Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body?

Question

avr1972 @avr1972

БЭМ

Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body?

Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body? Спасибо

Вопрос задан более трёх лет назад
161 просмотр

8 комментариев

Подписаться 2 Простой 8 комментариев

Ярослав Иванов @space2pacman

Чтож вы методологию так близко к сердцу принимаете. Прям жить мешает.

Написано более трёх лет назад
avr1972 @avr1972 Автор вопроса

Ярослав Иванов, Вот это меня и мучает. С одной стороны мне БЭМ очень нравится. А с другой постоянно тянет ее нарушить. Как с этим быть?

Написано более трёх лет назад
alex @potapchino

avr1972, вопрос то в чем?

Написано более трёх лет назад
avr1972 @avr1972 Автор вопроса

Alex, Вопрос: Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body?

Написано более трёх лет назад

alex @potapchino

avr1972,

<main>
  <div class="block"></div>
</main>

<body>
  <div class="header"></div>
</body>

Написано более трёх лет назад

avr1972 @avr1972 Автор вопроса

Alex, А как же, что позиционирование нельзя задавать самому блоку? Надо использовать миксы?

Написано более трёх лет назад
Johny Smith @Olek1
Alex,

<main> <div class="block"></div> </main> <body> <div class="header"></div> </body>

это не БЭМ
Написано более трёх лет назад
alex @potapchino

Olek1, какой вопрос, такой ответ

Написано более трёх лет назад

Решения вопроса 1

6 комментариев

avr1972 @avr1972 Автор вопроса

То есть я правильно понимаю, возникает искусственный блок site? И если бы не БЭМ он не нужен? Потому что если надо позиционировать site ....

Написано более трёх лет назад
Сергей delphinpro @delphinpro

avr1972, я заметил, что молодые разработчики крайне негативно относятся к "лишним" блокам в разметке =))
Постарайтесь изжить в себе это, и ваша жизнь как разработчика будет намного проще =))

Понимаете правильно. Но это не искусственный блок. Он вполне может быть задействован в разметке. Во-первых на body никогда не стоит полагаться. В него что только не запихивается в течение жизни сайта. Лучше всю страницу обернуть общим дивом, и в нем работать, оставив пространство в body на откуп остальным плагинам и т.п. Во-вторых этот блок может использоваться для прижатия подвала. В третьих, на него могут вешаться, в зависимости от дизайна, разные фоновые картинки. И еще куча вариантов использования.

Написано более трёх лет назад
Сергей delphinpro @delphinpro

В крайнем случае вы можете повесить вышеуказанный класс .site на сам элемент body, избавившись от дополнительной обертки. Но как я уже сказал, крайне не рекомендую этого делать.

Написано более трёх лет назад
avr1972 @avr1972 Автор вопроса

Сергей delphinpro, Интересно, спасибо

Написано более трёх лет назад
Johny Smith @Olek1

Сергей delphinpro, по БЭМу на каждый БЭМ-блок пишется свой .sсss-файл в идеале?

Написано более трёх лет назад
Сергей delphinpro @delphinpro

Olek1, Да

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как правильно добавить в данном примере сайдбар и main по бэм?
- 2 подписчика
- 04 апр.
- 170 просмотров
0

ответов
БЭМ

+1 ещё

Простой
Нужен ли БЭМ в современной верстке? И на что вообще обращают внимание в проектах портфолио?
- нет подписчиков
- 27 февр.
- 120 просмотров
1

ответ
HTML

+4 ещё

Простой
Как с такой структурой повторно использовать БЭМ блок?
- 1 подписчик
- 18 янв.
- 131 просмотр
0

ответов
БЭМ

Простой
Не теряется ли БЭМ логика в данном случае?
- 1 подписчик
- 19 нояб. 2023
- 103 просмотра
0

ответов
БЭМ

Средний
Как правильно именовать меню в сайдбаре?
- 1 подписчик
- 20 сент. 2023
- 47 просмотров
1

ответ
Sass

+1 ещё

Средний
Как сделать 1 tab в плагине eCSStractor и убрать стрелки?
- 1 подписчик
- 16 июн. 2023
- 57 просмотров
1

ответ
БЭМ

Простой
Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?
- 1 подписчик
- 02 июн. 2023
- 105 просмотров
2

ответа
HTML

+2 ещё

Простой
Как правильно сделать структуру по БЭМ?
- 1 подписчик
- более года назад
- 158 просмотров
1

ответ
HTML

+2 ещё

Простой
Каким классом по БЭМ можно назвать этот блок?
- 1 подписчик
- более года назад
- 84 просмотра
1

ответ
БЭМ

Простой
Правильно ли я понимаю БЭМ?
- 1 подписчик
- более года назад
- 121 просмотр
1

ответ
Показать ещё Загружается…

Senior Frontend разработчик

VINTEO • Краснодар

от 250 000 до 300 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

DevSecOps/удаленка

Outlines Tech

от 300 000 до 350 000 ₽

Сделать верстку для натяжки на wordpress по макету в figma

26 апр. 2024, в 14:21

10000 руб./за проект

Node JS Бек енд разработчик для доработки CRM системы авто салона

26 апр. 2024, в 14:10

60000 руб./за проект

Требуется Pure PhP + Symfony (Обязательно) разработчик для CRM/ERP

26 апр. 2024, в 14:07

3000 руб./в час

Чтож вы методологию так близко к сердцу принимаете. Прям жить мешает.
Ярослав Иванов, Вот это меня и мучает. С одной стороны мне БЭМ очень нравится. А с другой постоянно тянет ее нарушить. Как с этим быть?
Alex, Вопрос: Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body?
avr1972,
<main> <div class="block"></div> </main>

<body> <div class="header"></div> </body>
Alex, А как же, что позиционирование нельзя задавать самому блоку? Надо использовать миксы?
Alex,

<main> <div class="block"></div> </main> <body> <div class="header"></div> </body>

это не БЭМ

Answer 1 · 2018-07-09 18:11:27

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

<div class="site">
        <header class="site__header"></header>
        <main class="site__main page">
            <div class="page__breadcrumb breadcrumb"></div>
            <article class="page__article">
                <div class="page__title"><h1></h1></div>
                <div class="page__content"></div>
                <footer class="page__footer"></footer>
                <aside class="page__meta-information"></aside>
            </article>
        </main>
        <footer class="site__footer"></footer>
    </div>

В любом случае жестких рамок нет, просто соблюдайте общие рекомендации методологии.

Как позиционировать БЭМ блок являющиийся дочерним к тегу main? Как позиционировать блок header который является дочерним к body?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт