BEM methodology, modifier and conflicts

Question

For those who use BEM methodology to write CSS. I'm trying to learn BEM and I'm starting with a simple example, I have this:

HTML

<div class="content">
  <ul class="menu menu_vertical">
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
  </ul>
</div>

CSS

.menu {
  padding: 0;
}
.menu__item {
  list-style: none;
  display: inline-block;
  width: 20%;
}
.menu__link {
  padding: 10px 0;
  display: block;
  border: 1px solid gray;
  border-top: 0;
  border-bottom: 0;
  text-align: center;
  color: #0077BB;
  text-decoration: none;
}

As you can see, this is supposed to be a simple horizontal nav menu, but, I want to make it vertical. According to BEM (as far as I understand), I should use a Modifier, in this case something like .menu_vertical, and add the styles to make it vertical, the thing is that, I can't find the way to do it without using nested selectors (which is nor recomended for this methodology), and getting some conflicts, what should I do here?

score 2 · Answer 1 · answered Nov 09 '15 at 09:37

Using a modifier to affect block elements is the one case where nested selectors are acceptable. See http://getbem.com/faq/#block-modifier-affects-elements. As such, it's quite fine to

.menu--vertical .menu__item {
    ...
}

etc. Note that -- is normally used for modifiers instead of __.

BEM methodology, modifier and conflicts

1 Answers1