What is the best thing to do at such moments by bem?

Question

css

For example, there is such a block with elements:

<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>

And the question is can it be done? It’s just that these elements are not found anywhere else except for such a block, and I don’t know if I need to create new blocks?

As for the card, here I understand that it's better to create a new block, it will look cleaner, but with close, close-icon I'm not sure.

Do not tell me how to do in such situations?

Answer 1

This markup is absolutely correct in two cases:
1) Your `close` and `card` are really not reused anywhere;
2) The scope of the styles of the `some-class` block remains adequate for perception.
Accordingly, you need a new block in two cases: either it is reused, or to separate the code for ease of perception.
Let's take a more complicated markup (no need to look for any meaning in it, just typed something from the lantern for illustration):

<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>

Let's assume that all the content of this block is unique and is not reused in any way.
The volume of `block` styles with such a structure will inevitably become uncomfortable for perception, 200-300 lines.
In this case, it's good to create an inner block (or several) just to spread the complexity.
`block-header`, `block-footer` or even `block-footer-award`.
The most important thing here is to organize the file structure / configuration file / what else you collect there in such a way that it is obvious that `block-footer` is not an independent block, but an internal `block` block, needed only to simplify perception, and it is not may / should not be used in isolation from it (in which case it should not have a common prefix with `block` in the name, so as not to create confusion)
* And do not forget that even for such internal blocks the same rules apply as for others - all external geometry is specified through elements.