CODEWITHSUNDEEP
htmlcssbem
wentjun
wentjun

Reputation: 42526

Block Element Modifier - Using BEM without the 'Element'?

While I have been working with CSS (and other CSS pre-processors) for a while, I am still not entirely confident when it comes to following the Block Element Modifier (BEM) convention.

Let's assuming we are following this particular BEM format:

block-name__element-name_modifier-name_modifier-value

May I know if it is acceptable to specify a class without the element-name? This means we only have the block, followed by the modifier.

Here is an example: 

<div class="menu_light-theme">
  <!-- the other menu elements such as the buttons and icons -->
  <ul class="menu__list_light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

As you can see from the above block of code, the .menu_light-theme class acts as a 'wrapper' for the menu, and the class name contains only the block and modifier.

I understand this is subjective, but I am wondering if this conforms to BEM, and of course, I open to suggestions on how I could handle such situations when the element of BEM may seem 'redundant'.

Upvotes: 3

Views: 973

Answers (2)

Oleksandr Kukla
Oleksandr Kukla

Reputation: 21

According to documentation (http://getbem.com/naming/) we can use modifier on block or element but we have to keep class name of this block or element in html:

Good:

<div class="block block--modifier">
      <div class="block__element block__element--some-modifier">...</div>
      ...
</div>

Bad:

<div class="block--mod">...</div>
/* or */
<div class="block__element--mod">...</div>

Upvotes: 2

Valentin Duboscq
Valentin Duboscq

Reputation: 978

Sure you can, it's actually in the documentation: 

.button--state-success {...}

In your example, we could do something like this (don't forget to put two dashes for the modifier):

<div class="menu--light-theme">
  <!-- the other menu elements such as the buttons and icons -->
  <ul class="menu__list--light-theme>
    <li><a class="menu__list-element" href="">Home</a></li>
    <li><a class="menu__list-element" href="">About</a></li>
  </ul>
</div>

Upvotes: 2

Related Questions