相关疑难解决方法(0)

BEM块,命名和嵌套

我试图围绕BEM命名约定.我被困在这里.我可能会误解某些东西,让我们看看.

我有侧边栏导航和内容导航.

我的侧边栏导航看起来像这样

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

我的内容导航看起来像这样

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>
Run Code Online (Sandbox Code Playgroud)

现在我遇到问题,如果我设置.nav__item样式,它们会出现在我的两个导航中,并且不应该具有相同的样式.我应该在这里做一些嵌套,还是我命名我的块和元素错了?

在CSS中嵌套示例:

.content__nav .nav__item { background: Red; }
Run Code Online (Sandbox Code Playgroud)

或者我应该这样命名:

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>
Run Code Online (Sandbox Code Playgroud)

你能帮我吗?

html css bem

62
推荐指数
2
解决办法
2万
查看次数

标签 统计

bem ×1

css ×1

html ×1