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

时间:2016-08-15 08:24:58

标签: html css naming-conventions bem

我有以下内容,

<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__'用于每个子元素?

1 个答案:

答案 0 :(得分:0)

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