Bem names getting too long - best practice

Issue

I have the following HTML code, I tend to have a 3 code project identifier at the start

<span class="abc-user-overview__header__title"> 
    <span class="abc-user-overview__header__title__name">  
        {{ name }}  
    <span class="abc-user-overview__header__active">true</span>
</span>

Although the 'name' element is a child of title, how strict does the naming convention have to be? As I think abc-user-overview__header__title__name is too long and would prefer to drop the __title, giving me:

<span class="abc-user-overview__header__title"> 
     <span class="abc-user-overview__header__name">  
         {{ name }}  
     <span class="abc-user-overview__header__active"true</span>
</span>

Is this valid and acceptable BEM?

Solution

Sadly your code is not valid according to BEM convention. This is the official name structure block-name__elem-name_mod-name_mod-val.

Here is your code with valid BEM naming:

<span class="abc-user-overview__title"> 
    <span class="abc-user-overview__name">{{ name }}</span>
    <span class="abc-user-overview__status abc-user-overview__status_active">true</span>
</span>

Few tips:

• Avoid naming your blocks according to their content. Try to be generic for blocks that can be reused. For example, let us have a block that represents a list content. On one of the pages we may display News .news-list, but on other we may display Products, so reusing block with name .news-list with Products inside isnt very nice. In this case a simple class like .list will be enough.
• If something can be reused, make it block, not an element.
• For boolean modifiers, the value is not included in the name.

Full documentation and great examples can be found in the official website: https://en.bem.info/methodology/naming-convention/#naming-rules

Answered By - Nikolay Mihaylov