What's a service block?

[skube]

In the BEM documentation, they make reference to something called a "service block":

... In a case like this, instead of creating an element, you need to create a service block.

I can't find any mention of a service block. What does this actually mean?

[tadatuta]

@skube That's just a 'virtual' block which is not actually something really independent but serves the only reason — to split implementation into separate files.

For example consider block menu which has menu__item elements. Such elements may be quite complex so one may decide to create new block called menu-item and split its implementation into different elements: menu-item__icon, menu-item__text, etc.

[skube]

Thanks for the quick reply!

Can you perhaps give a basic code example?

[tadatuta]

Something like this

<ul class="menu">
    <!-- each `li` should actually be `menu__item` but there won't be possibility to create its own elements in that case -->
    <li class="menu-item">
        <span class="menu-item__icon"></span>
        <span class="menu-item__text">The first item</span>
        <span class="menu-item__toggle"></span>
    </li>
    <li class="menu-item">
        <span class="menu-item__icon"></span>
        <span class="menu-item__text">The second item</span>
        <span class="menu-item__toggle"></span>
    </li>
</ul>

[skube]

Interesting. I guess I would have simply created nested elements:

<ul class="menu">
    <!-- Is this alternate approach wrong ? -->
    <li class="menu__item">
        <span class="menu__icon"></span>
        <span class="menu__text">The first item</span>
        <span class="menu__toggle"></span>
    </li>
   ...
</ul>

Thanks!

[tadatuta]

You are right, that's just another way to solve the issue.