BEM方法，修飾符和衝突

Question

對於那些使用BEM方法編寫CSS的人。我努力學習BEM和我開始用一個簡單的例子，我有這樣的：

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; 
} 

正如你所看到的，這是應該做一個簡單的橫向導航菜單，但是，我想讓它垂直。據BEM（據我所知），我應該使用修改器，在這種情況下，像.menu_vertical，並添加樣式，使其垂直，事情是，我找不到方法不使用嵌套選擇器（這也不適用於這種方法），並得到一些衝突，我應該在這裏做什麼？

Answer 1

使用修飾符來影響塊元素是嵌套選擇器可接受的一種情況。請參閱http://getbem.com/faq/#block-modifier-affects-elements。因此，它是相當細到

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

等。注意--通常用於修飾，而不是__。