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

您可以將塊放在其他塊或元素中。 這絕對有效。