Соглашение об именах BEM для вложенных крошечных частей - PullRequest
Новая
       23

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

1 голос
/ 22 марта 2019

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

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

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

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

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)

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

enter image description here

1 Ответ

1 голос
/ 22 марта 2019

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

Для вашего каркаса я предлагаю два блока: блок 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.

...