0

对于那些使用 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（据我所知），我应该使用Modifier，在这种情况下类似于.menu_vertical，并添加样式以使其垂直，问题是，如果不使用嵌套，我找不到方法选择器（这种方法也不推荐），并遇到一些冲突，我应该在这里做什么？

4

1 回答 1

2

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

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

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

于 2015-11-09T09:37:11.387 回答