Как это правильно будет по БЭМ?

Question

[fantazerno]

Добрый день!

В виду того, что существуют не всегда хорошие дизайнеры и настойчивые заказчики (делай пиксель в пиксель, даже если все криво)

Дано:
- Блок
- С легкой руки дизайнера, тот же блок в разных местах макета имеет разные margin от 10-40 (условно)
Вопрос:
Как вы реализуете названия модификаторов, в частности их именования в похожих ситуациях. Когда состояние блоков меняется не значительно, но именование модификатора в каждом случае приводит к проблеме.

Answer 1

[Алекс Глебов]

Блок не отвечает за свое позиционирование, маргины задаются только элементам.

<div class="block1">
  <div class="block1_child">
    <div class="block2"></div>
  </div>
</div>

Comments

[fantazerno]

Хорошо, я перефразирую. Если есть заголовок H1 и у него по макету есть 5 вариантов отступов. Как правильно это будет выглядеть по данной методологии.

Answer 2

[Евгений]

Можно как вариант делать миксины к примеру есть 2 контейнера и 2 заголовка:

<div class="container-1">
    <div class="header container-1__header"></div>
</div>

<div class="container-2">
    <div class="header container-2__header"></div>
</div>

Соответственно вешаете стили на микс. классы: "container-*__header" а основной блок не трогаете

Answer 3

[Андрей Верх]

<div class="block block--margin20">

<div class="block block--margin10">

Comments

[fantazerno]

если будет адаптив, то данные классы станут неудобными

[Андрей Верх]

fantazerno: Не очень понимаю...каким образом и почему именно в адаптиве?

Наоборот, чем больше "специфичность", тем более более гибко можно стили подстроить.

[Сергей delphinpro]

fantazerno: по бэму как раз это и будет правильным. Только вот названия модификаторов следует выбрать не по свойствам, а по расположению блока. block--in-header, block--in-side

[fantazerno]

если, к примеру, в мобильной версии у блока с классом block--margin20 отступ будет 40px

[fantazerno]

сам вопрос был в том как именовать такие странные модификаторы, которые семантически сложно назвать правильно если в одном месте отступ 20 в другом 28 (а иначе в макете ни как)

[Андрей Верх]

fantazerno: А кто сказал что 10 это именно пиксели? Это просто абстрактная величина...чем больше, тем больше отступ. block--marginX1 block--marginX2

[Андрей Верх]

Сергей: Зависит от ситуации, имхо. Без привязки к положению, более универсально. Если блоков очень много, то придётся под каждое положение стили писать

[Сергей delphinpro]

Андрей Верх: тоже верно