Как согласно методологии BEM правильно сверстать такой участок макета?

Question

[krll-k]

Мой вариант bemjson.js в котором я ни много ни мало сомневаюсь:

{
    block : 'information',
    content : [
        {
            block : 'telephone',
            mods : { float : 'none' },
            content : [
                {
                    elem : 'phone-number',
                    content : '8 [phone]'
                },
                {
                    elem : 'opening-times',
                    content : 'Пн-Пт: 9:00-18:00'
                }
            ]
        },
        {
            block : 'telephone',
            content : [
                {
                    elem : 'phone-number',
                    content : '8 [phone]'
                },
                {
                    elem : 'additional-information',
                    content : 'Звонок по России бесплатный'
                }
            ]
        },
        {
            block : 'city',
            content : [
                {
                    elem : 'city',
                    content : 'Нижний Новгород'
                },
                {
                    elem : 'additional-information',
                    content : 'Доставка по городу и области бесплатная'
                }
            ]
        }
    ]
}

Что смущает?

1. более конкретизировать блок information, переименовав его в block-information чтоб было аннатацией с русского "блок информации", но верно ли это будет я пока не могу понять?
2. у блока information нет элементов, а только вложенные в него блоки - может ли элемент одновременно блоком?
3. название блоков и элементов должны ли отражать их содержимое, или можно(нужно) стараться избегать этого?
4. Из 3 следует - нужно ли давать имя элементам city и additional-information или просто сделать как information и subinformation?

Допустим вы уже применяли БЭМ к своим проектам, и знаете больше меня, и поэтому я допускаю что именно ваше предложенное решение вероятнее верное, нежели у меня. Могли бы вы мне показать как на основание указанного мной выше куска макета сверстать согласно BEM методологии в bemjson? Самое главное не забыть аргументировать свое решение, почему именно ваше решение правильное

Answer 1

[Антон]

1. В БЭМе итак блоки. Поэтому блок оставьте как есть block : 'information'. Тут ведь буквально написано блок: информация.
2. Вопрос не ясен. Да, в блоке information нет элементов, но как это связано со второй частью вопроса?
Так или иначе в bemjson можно делать миксы — то есть миксовать элементы блока на другие блоки или блоки на элементы другого блока или блок на блок и т.п.
3, 4. Да, конечно должны. Можно конечно оставить элемент city в блоке city, но лучше элемент назвать name или title. И немного смущает элемент opening-times в блоке telephone. Может вместо блока telephone сделать элемент блока information с названием section? Как вариант предлагаю так, обойтись единственным блоком information:

{
    block : 'information',
    content : [
        {
            elem: 'section',
            mods : { float : 'none' },
            content : [
                {
                    elem : 'phone-number',
                    content : '8 [phone]'
                },
                {
                    elem : 'opening-times',
                    content : 'Пн-Пт: 9:00-18:00'
                }
            ]
        },
        {
            elem: 'section',
            content : [
                {
                    elem : 'phone-number',
                    content : '8 [phone]'
                },
                {
                    elem : 'additional-information',
                    content : 'Звонок по России бесплатный'
                }
            ]
        },
        {
            elem: 'section',
            mods: { type: 'city' }
            content : [
                {
                    elem : 'city',
                    content : 'Нижний Новгород'
                },
                {
                    elem : 'additional-information',
                    content : 'Доставка по городу и области бесплатная'
                }
            ]
        }
    ]
}

Comments

[RubaXa]

У вас получился элемент элемента, а это не по BEM ;] Хотя даже сам Яндекс бывает отходит от этого правила, но это не от хорошей жизни. В идеальном BEM недолжно быть такого.

[Антон]

RubaXa: элемент в элементе может быть. Есть пруф, что так быть не должно?

[RubaXa]

Вот https://ru.bem.info/tools/bem/bem-naming/#Частые-з...

[Антон]

RubaXa: а вы уверены, что правильно интерпретировали написанное? Речь идет об одной БЭМ сущности, выраженной сразу в 2х элементах: block__some-elem__sub-elem. Конечно так делать нельзя. Класть элемент в элемент — можно.

[Антон]

RubaXa: Откройте https://ru.bem.info/method/definitions/ , найдите пример после слов "Или так, чтобы сделать классы"

[RubaXa]

Да, уверен, правильно, а вот BH нет :[ Так что примите мои извинения, честно думал, что он соберет `information__section__phone-number`, был не прав. Но всё равно, блок получается какой-то заточенный под конкретную цель, слишком много «знает», хотя возможно это и оправдано, зависит от задачи.

Answer 2

[RubaXa]

Блоки нужно стараться максимально обезличивать, всё конечно зависит от задачи, но если не планируется какой-то связанной функциональность на BEMJS, то можно `opening-times` и `additional-information` привести к единому `details`. Если всё же BEMJS, то опять же в `opening-times` слишком много конкретики, я бы назвал `schedule` как более общее.

{
  block: "information",
  content: [{
    elem: "section",
    content: [{
      block: "phone",
      content: [{
        elem: "number",
        content: "8 [phone]"
      }, {
        elem: "schedule",
        content: "Пн-Пт: 9:00-18:00"
      }]
    }, {
      block: "phone",
      content: [{
        elem: "number",
        content: "8 [phone]"
      }, {
        elem: "details",
        content: "Звонок по России бесплатный"
      }]
    }]
  }, {
    elem: "section",
    content: [{
      block: "city",
      content: [{
        elem: "name",
        content: "Нижний Новгород"
      }, {
        elem: "details",
        content: "Доставка по городу и области бесплатная"
      }]
    }]
  }]
}

Comments

[RubaXa]

Да, и блоки лучше сложить внутри `section`, который будет отвечать за их позиционирование, как предложил Антон