RU
skube
skube
4 August 2017

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
#tadatuta
4 August 2017

@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
#skube
4 August 2017

Thanks for the quick reply!

Can you perhaps give a basic code example?

tadatuta
#tadatuta
4 August 2017

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
#skube
4 August 2017

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
#tadatuta
4 August 2017

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