Соглашение об именах БЭМ для вложенных крошечных деталей

Только начал программировать по методологии именования БЭМ. Мне было интересно, как назвать вложенные крошечные части.

Я прикрепил образец макета ниже, пожалуйста, посмотрите.

Внутри h3 есть два span, и я хочу, чтобы они имели разный стиль.

Тогда я просто назову их так, как будто они принадлежат своему родителю:

class="en product-lineup__title-en"
class="non-en product-lineup__title-non-en"

или как будто они принадлежат их названию (но это похоже на BEEM...):

class="en product-lineup__title__en"
class="non-en product-lineup__title__non-en"

или просто оставьте поле пустым, а затем в CSS

.product-lineup__title span:first-child
.product-lineup__title span:nth-child(2)

Как лучше или я неправильно понимаю правило БЭМ?

введите здесь описание изображения


css bem
person norixxx    schedule 22.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

БЭМ — это методология многократно используемых блоков. Если вы видите визуальный шаблон, который повторяется в пользовательском интерфейсе, вам следует рассматривать его как блок, а не как элемент. Элементы — это детали блока.

Для вашего вайрфрейма я предлагаю два блока: блок lineup отвечает за глобальную компоновку:

<ul class="lineup">
  <li class="lineup__item"></li>
  <li class="lineup__item"></li>
  …
</ul>

В каждом <li> есть экземпляр блока product:

<article class="product">
  <img class="product__img">
  <h3 class="product__title">…</h3>
  <div class="product__text">…</div>
</article>

Если вы хотите сохранить текущую структуру HTML, у вас есть сочетание <li> разметки:

<ul class="lineup">
  <li class="lineup__item product">
    <img class="product__img">
    <h3 class="product__title">…</h3>
    <div class="product__text">…</div>
  </li>
  …
</ul>

Здесь класс CSS lineup__item отвечает за позиционирование дочернего блока product в родительском блоке linup. Блок не должен позиционироваться сам по себе (его нельзя будет использовать повторно).

Затем ваш элемент product__title имеет двух дочерних элементов en и non-en. В БЭМ элемент не может быть родителем других элементов. Но он может вкладывать братские элементы. Ты можешь сделать:

<h3 class="product__title">
  <span class="product__title-en"></span>
  <span class="product__title-non-en"></span>
</h3>

В БЭМ-дереве все title, title-en, title-non-en являются дочерними элементами блока product. Это легкое решение.

Но, может быть, вы поймете, что этот тип двойных заголовков является визуальным шаблоном, используемым за пределами блока product, или, может быть, просто для ясности вы можете решить сделать для этого блок dual-title.

<h3 class="product__title dual-title">
  <span class="dual-title__en"></span>
  <span class="dual-title__non-en"></span>
</h3>

Здесь класс CSS product__title отвечает за позиционирование дочернего блока dual-title в родительском блоке product.

person Paleo    schedule 22.03.2019
comment
Так что мне нужно было увидеть больше Blocks, а не беспокоиться о Elements. Думаю, теперь я хорошо разбираюсь в БЭМ :) - person norixxx; 22.03.2019