css - 使用 bem 命名导航下拉菜单

Question

用 bem 命名下拉菜单的最佳方式是什么？？使用子项 nav-main__sub 或修饰符 nav-main--sub ??

<ul class="nav nav-main">
<li class="nav__item">
    <a href="#" class="nav__link is-active">home</a>
</li>
<li class="nav__item nav__item--sub-nav">
    <a href="#" class="nav__link">About</a>
    <ul class="nav nav-main--sub">             
        <li class="nav-main--sub__item">
            <a href="#" class="nav-main--sub__link">Company</a>
        </li>
    </ul>
<li class="nav__item">
        <a href="#" class="nav__link">Contact</a>
</li>

Answer 1

恕我直言 nav-main__sub，因为它不是修饰符。

<ul class="nav nav--main">
    <li class="nav__item nav__item--sub-nav">
        <a href="#" class="nav__link">About</a>
        <ul class="nav nav-main__sub">             
            <li class="nav-main__sub-item">
                <a href="#" class="nav-main__sub-link">Company</a>
            </li>
        </ul>
    </li>
</ul>

或更简单:

<ul class="nav nav--main">
    <li class="nav__item nav__item--sub-nav">
        <a href="#" class="nav__link">About</a>
        <ul class="sub">             
            <li class="sub__item">
                <a href="#" class="sub__link">Company</a>
            </li>
        </ul>
    </li>
</ul>