Можно ли писать так по bem?

Question

[wakenbyWork]

<form class="modal-body-feedback modal-body">

  <div class="modal-body__close">
    <svg class="modal-body__close-icon">
      <use href="/assets/sprite/sprite.svg#close"></use>
    </svg>
  </div>

  <div class="modal-body__title modal-body-feedback__title">...</div>
  <div class="modal-body__desc modal-body-feedback__desc">...</div>

  <div class="modal-body-feedback__list">
    <input class="input" type="text" placeholder="Имя"/>
    <input class="input" type="text" placeholder="[phone]"/>
    <input class="input" type="text" placeholder="E-mail"/>
  </div>

  <div class="modal-body-feedback__doc">...</div>
  <button class="btn btn--fill modal-body__btn modal-body-feedback__btn">Отправить</button>
</form>

Есть множество модальных окон. И под каждое модальное окно создаю свой блок. Но у многих модальных окон есть одинаковые элементы и сами стили модальных окон одни. Я решил создать универсальный блок, и в итоге у меня один тег может быть двумя блоками, или двумя элементами:

<form class="modal-body-feedback modal-body"></form> <!-- form является блоком  modal-body-feedback и блоком modal-body -->

<div class="modal-body__title modal-body-feedback__title">...</div> <!-- div является элементом modal-body__title и modal-body-feedback__title -->

<button class="btn btn--fill modal-body__btn modal-body-feedback__btn">Отправить</button>

Можно ли так миксовать по бем?

Comments

[Виталий Першин]

Вам не кажется что это какая-то тавтология? Заведите модификаторы и спите спокойно.

[wakenbyWork]

Виталий Першин, Кажется, по этому и спросил =)

Вы имеете вот так писать лучше?

<form class="modal-body-feedback modal-body">

  <div class="modal-body__close">
    <svg class="modal-body__close-icon">
      <use href="/assets/sprite/sprite.svg#close"></use>
    </svg>
  </div>

  <div class="modal-body__title modal-body__title--mb-small">...</div>
  <div class="modal-body__desc modal-body__desc--mb-middle">...</div>

  <div class="modal-body-feedback__list">
    <input class="input" type="text" placeholder="Имя"/>
    <input class="input" type="text" placeholder="[phone]"/>
    <input class="input" type="text" placeholder="E-mail"/>
  </div>

  <div class="modal-body-feedback__doc">...</div>
  <button class="btn btn--fill modal-body__btn modal-body__btn--mt-small">Отправить</button>
</form>

[wakenbyWork]

Виталий Першин, т.е нормально делать div двумя блоками:

<form class="modal-body-feedback modal-body"></form>

И уже внутри делать как вы посоветовали и я написал в сообщении выше?)) Или я не так понял?

[Виталий Першин]

wakenbyWork, Я не видел макет, чтобы делать однозначные выводы. Миксовать два блока конечно можно, а вот перемешивать элементы как у вас мне кажется плохой идеей, хотя технически можно и так. В целом я не понимаю с какой целью вообще использовать такие названия. Я вижу modal-body ну ок, означает ли это что есть modal-head и modal-footer, если нет, то почему не назвать просто modal? Если ДА, то это уже не очень правильный БЭМ, то есть в самом блоке modal уже есть проблема именования и как по мне отсюда и все остальные проблемы.
Почему бы вам не создать полноценные блок modal, если надо то с модификаторами на все случаи. Далее просто создайте блок feedback в контенте modal и реализуйте его как угодно. Это не просто сделает понятные наименования, но и разделит назначения блоков делая их более независимыми, но опять же, все это надо решать исходя из макета. И да, последний вариант выглядит намного понятнее и проще

[wakenbyWork]

Виталий Першин, Спасибо за ответе! Все стало понято!)

Answer 1

[Алексей Николаев]

Делать так технически можно, но семантически несколько скомканно. Поддержу идею про модификаторы.