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

Question

[wakenbyWork]

Например есть такой блок с элементами:

<div class="some-class">
  <div class="some-class__close">
    <svg class="some-class__close-icon"></svg>
  </div>

  <div class="some-class__card">
    <div class="some-class__card-picture"></div>
    <div class="some-class__card-title"></div>
    <div class="some-class__card-desc"></div>
    <div class="some-class__card-btn"></div>
  </div>
</div>

И вопрос можно ли так делать? Просто эти элементы ни где не встречаются больше кроме такого блока, и создавать новые блоки не знаю нужно ли?

На счет card, тут я понимаю что лучше создать новый блок, будет чище выглядеть, но с close, close-icon я не уверен.

Не подскажите как делать в таких ситуациях?

Answer 1

[Максим Морев]

Эта разметка абсолютно правильная в двух случаях:
1) Ваши `close` и `card` действительно нигде не переиспользуются;
2) Объём стилей блока `some-class` остаётся адекватным для восприятия.

Соответственно, вам нужен новый блок в двух случаях: либо он переиспользуется, либо для разделения кода для простоты восприятия.

Возьмём разметку посложнее (не надо в ней искать какого-то смысла, просто от фонаря что-то набрал для иллюстрации):

<div class="block">
  <!-- Header -->
  <div class="block__header">
    <h2 class="block__title">Title</h2>
    <div class="block__actions">
      <button type="button" class="block__action block__action--edit">
        <span class="block__action-icon"></span>
      </button>
    </div>
  </div>
  <!-- Content -->
  <div class="block__content">
    <p>...</p>
  </div>
  <!-- Footer -->
  <div class="block__footer">
    <div class="block__about">
      <div class="block__author"></div>
      <div class="block__date"></div>
    </div>
    <div class="block__awards">
      <div class="block__award">
        <div class="block__award-inner"></div>
        <div class="block__award-tooltip">
          <div class="block__award-tooltip-content"></div>
          <button type="button" class="block__award-tooltip-close"></button>
        </div>
      </div>
    </div>
  </div>
</div>

Положим, что весь контент этого блока уникальный и никак не переиспользуется.
Объём стилей `block` при такой структуре неизбежно станет некомфортным для восприятия, строк на 200-300.

В таком случае хорошо создать внутренний блок (или несколько) просто для того, чтобы размазать сложность.
`block-header`, `block-footer` или даже `block-footer-award`.

Самое главное здесь организовать файловую структуру / конфигурационный файл / чем вы там ещё собираете таким образом, чтобы было очевидно, что `block-footer` - это не самостоятельный блок, а внутренний блок `block`, нужный только для упрощения восприятия, и он не может / не должен использоваться в отрыве от него (в этом случае у него не должно быть в названии общего префикса с `block`, чтобы не создавать путаницу)

* И не забывать о том, что даже для таких внутренних блоков действуют те же самые правила, что и для других - вся внешняя геометрия задаётся через элементы.

Comments

[wakenbyWork]

`block-footer` - это не самостоятельный блок, а внутренний блок `block`, нужный только для упрощения восприятия, и он не может / не должен использоваться в отрыве от него (в этом случае у него не должно быть в названии общего префикса с `block`, чтобы не создавать путаницу)

Спасибо за ответ, я не совсем понял, можно ли так называть внутренние блоки?

Например вот выдуманный пример:

<div class="sect-some">
  <div class="sect-some__header">
    <div class="sect-some__header-avatar"></div>

    <div class="sect-some__header-menu"></div>
  </div>

  <div class="sect-some__card">
    <div class="sect-some__card-picture"></div>
    <div class="sect-some__card-body"></div>
    <div class="sect-some__card-footer"></div>
  </div>
</div>

И я хочу ввести внутренние блоки, то называть их с префиксом родительского блока нельзя?

<div class="sect-some">
  <div class="sect-some-header">
    <div class="sect-some-header__avatar"></div>

    <div class="sect-some-header__menu"></div>
  </div>

  <div class="sect-some-card">
    <div class="sect-some-card__picture"></div>
    <div class="sect-some-card__body"></div>
    <div class="sect-some-card__footer"></div>
  </div>
</div>

[Максим Морев]

wakenbyWork, внутренние блоки (нужные только для того, чтобы разгрузить основной блок) обязательно должны содержать в себе название основного блока - но это не какое-то правило, это частная рекомендация для упрощения навигации и чтения кода.

Когда вы смотрите разметку блока `sect-some` - вы держите в голове, что основная сущность в текущий момент `sect-some`, и когда вы видите в разметке блок `sect-some-header` - вы сразу же понимаете, что это внутренний блок, уверены в этом, знаете, где его искать, и держите в голове сразу, что все изменения, которые вы внесёте в этот внутренний блок, не имеют сайд-эффектов ни на какие другие блоки вне этого контекста - это упрощает внесение исправлений.

Это всё делается для упрощения восприятия, ни больше и ни меньше.
При такой разработке хорошо иметь и файловую структуру такой, чтобы она подсказывала отношения между элементами.
Например, такую:

some-sect
├── _some-sect-header
│   ├── some-sect-header.scss
│   └── some-sect-header.html
├── _some-sect-card
│   ├── some-sect-card.scss
│   └── some-sect-card.html
├── some-sect.scss
└── some-sect.html

[wakenbyWork]

Максим Морев, Теперь все стало понятно, спасибо!

[wakenbyWork]

Максим Морев, Добрый день! Возник вопрос по вашему ответу, очень хочется услышать ваше мнение))

У меня такая структура на данный момент:

modules
├── some-sect
│      ├── some-sect.pug
│      └── some-sect-header.scss
├── some-sect-card
│      ├── some-sect-card.pug
│      └── some-sect-card.scss

И хочется улучшить ее до вашего примера, чтобы было так:

modules
├── some-sect
│      ├── _some-sect-card
│      │       ├── some-sect-card.pug
│      │       └── some-sect-card.scss
│      ├── some-sect.pug
│      └── some-sect-header.scss

Но возник вопрос, что если у внутреннего блока будет свой внутренний блок? Или такого не нужно допускать?

[Максим Морев]

wakenbyWork, я стараюсь не допускать вложенности более трёх, но при реализации сложных интерфейсов встречается и четыре, и даже пять. Больше, вроде не было.

Я не вижу ничего предосудительного, если это оправдано - то есть мельчить и создавать блоки, в которых три строки разметки и три CSS правила - не стоит. Но если каждый отдельный блок имеет самостоятельную, относительно объёмную логику / разметку / стили - это оправдано, и на то, насколько уродливо в этом случае выглядит файловое дерево - в общем-то плевать, ибо тыкать мышкой в этой дерево вы будете примерно никогда.

Увидели в разметке "some-sect-deep-nested-entity", нажали Ctrl+P (VSCode), вбили туда название класса, клацнули Enter и попали туда, куда вам надо.

[wakenbyWork]

Максим Морев, Понял, спасибо, тогда не важно какая будет архитектура по вложенности, и так можно писать?:

modules
├── some-sect
│   ├── _some-sect-card
│   │   ├── _some-sect-card-aside
│   │   │   ├── some-sect-card-aside.pug
│   │   │   └── some-sect-card-aside.scss
│   │   ├── some-sect-card.pug
│   │   └── some-sect-card.scss
│   ├── some-sect.pug
│   └── some-sect-header.scss

[Максим Морев]

wakenbyWork, можно всё, что делает вашу работу проще и очевиднее для себя и для других. :)
Я на таком остановился, да.

[wakenbyWork]

Максим Морев, Понял, спасибо!)