Question

对于那些使用BEM方法编写CSS的人。我正在尝试学习BEM，我从一个简单的例子开始，我有这个：

HTML

<div class="content">
  <ul class="menu menu_vertical">
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
    <li class="menu__item"><a href="" class="menu__link">Link Y</a></li>
  </ul>
</div>

CSS

.menu {
  padding: 0;
}
.menu__item {
  list-style: none;
  display: inline-block;
  width: 20%;
}
.menu__link {
  padding: 10px 0;
  display: block;
  border: 1px solid gray;
  border-top: 0;
  border-bottom: 0;
  text-align: center;
  color: #0077BB;
  text-decoration: none;
}

正如您所看到的，这应该是一个简单的水平导航菜单，但是，我想让它垂直。根据BEM（据我所知），我应该使用 修饰符 ，在这种情况下类似于.menu_vertical，并添加样式以使其垂直问题是，如果不使用嵌套选择器（这种方法也不推荐），我找不到这样做的方法，并且遇到一些冲突，我该怎么办？

Answer 1

使用修饰符来影响块元素是嵌套选择器可接受的一种情况。见http://getbem.com/faq/#block-modifier-affects-elements。因此，

非常好

.menu--vertical .menu__item {
    ...
}

等。请注意，--通常用于修饰符而不是__。

BEM方法，修饰语和冲突

1 个答案: