БЭМ позиционирование элемента

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Не могу разобраться с тем как прописать отступы и тд для размещения элемента внутри блока родителя.
Прочитал в одной статье:

Позиционирование блока задается родителем

Пересмотрев примеры и код других сайтов пришел к выводу, что для позиционирования элемента есть два варианта:
1. Сделать блок-обертку над элементом и уже позиционировать блок-обертку.
2. Миксование, написать css класс в котором будет спозиционирован элемент и добавить его в html коде элемента.

Почему я задаю эти вопросы, просмотрев один доклад возник у человека подобный вопрос и он сказал что решает его 1-й способ (блок-обертка), но на это представитель Яндекса(вступивший в дискуссию) ответил что лучше использовать миксование. Просмотрев примеры я понял что все используют и то и то.
Я правильно описал способы? Какой способ используете вы?

Теми: Front-end

.b-blog { // стили родительcкого блока &__item { // вместо того чтобы позиционировать блок b-post внутри b-blog, мы придумали дочерний элемент — b-blog_item, который дополнит стили b-post и задаст его позиционирование. } @at-root .b-post { // стили блока b-post, без позиционирования, только внешний вид } }

Ctrl + Enter

Sergey Puzankov Front-end Team Lead в WiX 05.04.2016 12:38

6го апреля Владимир Гриненко, руководитель разработки BEM платформы из Яндекса будет проводить бесплатный вебинар. В конце можно задать ему свои вопросы, он всегда с радостью отвечает: frontend-science.com/bem-webinar

Відповісти

Підтримати

Ihor Zenich CSS engineer в EPAM 27.03.2016 19:02

Есть 3 способа, каждый из них правильный, выбирают исходя из конкретной ситуации:

1. Микс элемента родителя + новый блок.
Он создаёт связи между блоками, где вложенный блок — одновременно и отдельный блок (.b-post) и элемент родительского блока (.b-blog__item). Они смешиваются на одной DOM-ноде, это называется миксование: <div class="b-blog_item b-post">.
Позиционирование — на элементе родителя и блоке родителя, стили блока — на новом блоке.

<div class="b-blog">
    <div class="b-blog_item b-post">
    </div>
</div>

2. Микс блоков и сетки
Позиционирование — на классах сетки, стили блоков — на самих блоках.

<div class="b-blog b-grid">
    <div class="b-grid__col b-post">
    </div>
</div>

Сетку можно и не миксовать, а вкладывать лесенкой:

.b-blog > .b-grid > .b-grid__col > .b-post

3. Блоки-врапперы (l-, h-).
Позиционирование — на блоках-врапперах.
Связей между блоками (блок—элемент) больше нет!
Яндекс-реализация БЭМ не рекомендует, но в остальных БЭМ-реализациях используется активно.

<div class="l-blog">
    <div class="b-blog">
        <div class="l-post">
            <div class="b-post">
            </div>
        </div>
    </div>
</div>

Александр Алексеев 30.03.2016 21:39

Спасибо, Игорь. Кстати, я это про Ваш доклад писал в топике.

Ihor Zenich

Anton Parkhomenko AI Solutions Consultant в Merge Development 27.03.2016 13:54

По-моему, вы смешали понятия «блок» (блочный элемент, например <div>) и БЭМ-блок (главный, родительский элемент структуры в БЭМ). В указанной цитате, по-моему, речь идет о первом.

А о позиционировании — все зависит от юзкейса.

«По умолчанию» любой блочный элемент пытается занять всю ширину, и если задать ему position: relative, то это будет правильно для большинства случаев, кроме всяких sticky bar, тултипов и прочего.

То, что вы назвали «блоком-оберткой», обычно и есть родительский БЭМ-блок, внутри которого, например, уже будет ограниченный по ширине и отцентрированный «контейнер»:

.module-name {
  display: flex;
  justify-content: center;
  position: relative;
  &__container {
    width: $container-width;
  }
}

Gennady Dogaev full-stack web developer (freelance) 27.03.2016 12:51

Не знаю что такое БЭМ, и какое позиционирование вы хотите, но в общем-то способы зависят от макета и требований к верстке. Так, если есть блок фиксированной ширины, или заданной в процентах, а в него нужно добавить внутренние отступы (padding), то есть 2 варианта:
1) Добавить padding к самому блоку, но тогда ширину нужно рассчитывать за вычетом отступов. Плюсом будет то, что нет лишних элементов на странице. Минусом то, что изменяя отступы нужно пересчитывать и ширину.
2) Внутрь блока добавить ещё один, ширину ему не указывать и указать padding. Плюсом будет то, что отступы проще поменять, минусом — наличие лишнего блока в верстке. Мне этот способ нравится больше, особенно если нужно адаптивно сверстать.
Это если об отступах говорить (а я думаю вы о них, а не о позиционировании всё-таки).

Mykola Prymak Клепаю формочки в Zalando 27.03.2016 13:02

Для чого перераховувати ширину при зміні відступів?

box-sizing: border-box; — 97% support

caniuse.com/#feat=css3-boxsizing

Gennady Dogaev

Gennady Dogaev full-stack web developer (freelance) 27.03.2016 15:05

Я не дуже знайомий з CSS3, дякую

Mykola Prymak

Dmitriy Miekh 26.03.2016 18:49

Кто-то еще использует эту чушь под названием БЭМ?

Anton Parkhomenko AI Solutions Consultant в Merge Development 27.03.2016 13:39

Да, такие недалекие и дурацкие конторы как BBC, 18F, airbnb, EPAM UXD, ну и еще несколько тысяч недостойных глупцов, которые еще не осознали того, что на самом деле BEM — чушь.

Dmitriy Miekh

Александр Алексеев 27.03.2016 14:26

Какую альтернативу посоветуете? Знаю, что бы хорошо вести проекты нужна методология верстки, как мне сказали «не важно какая, главное что бы была».

Anton Parkhomenko

Anton Parkhomenko AI Solutions Consultant в Merge Development 27.03.2016 14:35

Все правильно вам сказали. Не пойму только, чем вас не устраивает БЭМ как методология верстки. Мне, например, очень нравятся принципы специфичности (у каждого элемента свой класс) и инкапсулированности (все стили блока внутри блока). Первый исключает проблемы с приоритетами специфичности и наследований в CSS, второй — спагеттиобразность кода и облегчает дебаг, особенно на больших проектах. Также БЭМ хорош тем, что для его внедрения не обязательно начинать с нуля, то есть для рефакторинга он тоже годится (правда не без костылей).

Александр Алексеев

Александр Алексеев 27.03.2016 16:55

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

Anton Parkhomenko AI Solutions Consultant в Merge Development 27.03.2016 17:41

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

mrself 28.03.2016 21:05

cnn вроде тоже

БЭМ позиционирование элемента

14 коментарів

Підписатись на коментарі