what is service block in BEM naming methodology?

Question

bem elements rules say.

Create an element If a section of code can't be used separately without the parent entity (the block).

The exception is elements that must be divided into smaller parts – subelements – in order to simplify development. In the BEM methodology, you can't create elements of elements. In a case like this, instead of creating an element, you need to create a service block.

Question: can anyone tell me the meaning of service block in BEM?

Answer 1

It is just a BEM block, but created for separating your code into smaller parts.

So, instead of this:

<ul class="list">
  <li class="list__item">
    <p class="list__item-title">lorem ipsum</p>
    <p class="list__item-copy">dolor sit amet</p>
  </li>
</ul>

list.css:
.list {}
.list__item {}
.list__item-title {}
.list__item-copy {}

You can do this:

<ul class="list">
  <li class="list-item list__item">
    <p class="list-item__title">lorem ipsum</p>
    <p class="list-item__copy">dolor sit amet</p>
  </li>
</ul>

list.css:
.list {}
.list__item {}

list-item.css:
.list-item {} <-- service block
.list-item__title {}
.list-item__copy {}