BEM - 如何管理多个嵌套类名

Question

我有以下，

<header id="header">
    <div class="header__top">
        <div class="container">

            <ul class="top-nav"><!-- new name -->

                <li class="dropdown top-nav__profile">
                    <a href="" data-toggle="dropdown">Hi Mallinda!</a>

                    <ul class="dropdown-menu">
                        <li><a href="">Profile</a></li>
                        <li class="top-nav__saved"><a href="">Saved Searches</a></li>
                        <li class="top-nav__saved"><a href="">Saved Agents</a></li>
                        <li class="top-nav__saved"><a href="">Saved Listings</a></li>
                        <li><a href="">Email Preferences</a></li>
                        <li><a href="">Logout</a></li>
                    </ul>
                </li>
                <li class="top-nav__icon">
                    <a href=""><i class="zmdi zmdi-notifications"></i></a>
                </li>

                <li class="pull-right top-nav__icon">
                    <a href=""><i class="zmdi zmdi-facebook"></i></a>
                </li>
                <li class="pull-right top-nav__icon">
                    <a href=""><i class="zmdi zmdi-twitter"></i></a>
                </li>
                <li class="pull-right top-nav__icon">
                    <a href=""><i class="zmdi zmdi-google"></i></a>
                </li>
            </ul>
        </div>
    </div>
</header>

由于我有很多嵌套类，所以我决定在某个级别之后选择一个新名称“top-nav”。 它在BEM中有效吗？ 或者我是否需要将块名称'header__'用于每个子元素？

Answer 1

您可以将块放在其他块或元素中。 这绝对有效。