BEM: Can modifiers be modified?

Question

Say I have the following CSS for a generic list component using BEM and SCSS:

.list { &__item { &:not(:last-child) { margin-right: .3em; } } } 

I want to add a modifier that can make the list vertical, for example:

 .list--vertical { display: flex; flex-direction: column; } 

My problem arises when I think of stock for list__item elements. For vertical lists, I want my margin to be at the bottom, and not to the right of each item. If I understood BEM correctly, I cannot change the list__item style based on the list modifier, is that correct?

To be more precise, this is what I want to do:

 .list--vertical { display: flex; flex-direction: column; .list__item { &:not(:last-child) { margin-bottom: .3em; margin-right: 0; } } } 

What is an acceptable way to deal with this use of BEM? Another modifier for list__item that handles margin? Is the other block completely for vertical lists?

Answer 1

What is an acceptable way to deal with this use of BEM?

Depends on which version of BEM you are using. I use the BEM pre-specification option , which means that you will have different answers if you follow bem.info .

---

Modifiers must be attached to the element that they are modifying. However, modifying the block allows the modifier to be inherited by children:

 <div class="foo foo--example"> <div class="foo__bar foo--example__bar">...</div> <div> 

This gets messy when the children also have modifiers:

 <div class="foo foo--example"> <div class=" foo__bar foo--example__bar foo__bar--another-example foo--example__bar--another-example">...</div> <div> 

This form of BEM syntax is pretty verbose. It is best used for generated code.

---

I use LESS for CSS preprocessing, so my BEM code often looks like this:

 .foo { ... &__bar { ... } } 

With modifiers it becomes:

 .foo { ... &__bar { ... } &--example { ... &__bar { ... } } } 

This ensures that the cascade is in the correct order and that all selectors continue to have exactly one class.