CODEWITHSUNDEEP
csshtmlnaming-conventionsbem
TommyD
TommyD

Reputation: 1043

Bem names getting too long - best practice

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?

Upvotes: 1

Views: 3367

Answers (3)

Davide Muzzarelli
Davide Muzzarelli

Reputation: 989

Instead of this:

block-name__elem-name_mod-name_mod-val

I use this, that's a bit shorter and easier to read:

blockName-elemName--modName--modVal

In alternative, you can separate the modificator. Be careful, this may create conflicts if you use mixins:

<ul class="blockName">
  <li class="blockName-elemName --first">...</li>
  <li class="blockName-elemName">...</li>
  <li class="blockName-elemName">...</li>
  <li class="blockName-elemName --last">...</li>
</ul>

Upvotes: 0

ProgrammerGuy
ProgrammerGuy

Reputation: 439

Those names aren't too long. Sometimes when names get too long it's because you've got too much going on in that page. When I see that in angular (for example) I consider extracting components, then you can chop off the block and half the element name from the existing css classes and replace with a shorter block name. it makes the parent component so much easier to read when you move a lot of unrelated complexity to a different component. Good candidates for this could include

  • mobile menus
  • containers (anything with responsive widths, padding or icons to collapse or expand some region)
  • footers
  • complicated widgets that show some stats
  • any repeated card with a title, photo, description and hyperlink.

Some of these components might be useful for the whole application, or maybe just for that page. Etc.

Upvotes: 0

Nikolay Mihaylov
Nikolay Mihaylov

Reputation: 3884

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

Upvotes: 1

Related Questions