BEM：允许修改哪些修饰符？

Question

假设我有以下 CSS 用于通用列表组件，使用 BEM 和 SCSS：

.list {
  &__item {
    &:not(:last-child) {
      margin-right: .3em;
    }
  }
}

我想添加一个可以使列表垂直的修饰符，如下所示：

.list--vertical {
  display: flex;
  flex-direction: column;
}

当我想到 list__item 元素的边距时，我的问题就出现了。对于垂直列表，我希望我的边距位于底部，而不是每个项目的右侧。如果我对BEM的理解正确，我不能根据list的修饰符来修改list__item的样式，对吗？

更准确地说，这是我想做的：

.list--vertical {
  display: flex;
  flex-direction: column;

  .list__item {
    &:not(:last-child) {
      margin-bottom: .3em;
      margin-right: 0;
    }
  }
}

使用 BEM 处理此问题的公认方法是什么？ list__item 的另一个修饰符处理边距？另一个完全用于垂直列表的块？

Answer 1

使用 BEM 处理此问题的公认方法是什么？

取决于您使用的 BEM 版本。我用a variant of the pre-spec concept of BEM，意思是关注bem.info会有不同的答案。

---

修饰符应该附加到它们修改的元素上。但是，修改块允许子元素继承修饰符：

<div class="foo foo--example">
  <div class="foo__bar foo--example__bar">...</div>
<div>

当子元素也有修饰符时，这会变得很混乱：

<div class="foo foo--example">
  <div class="
    foo__bar
    foo--example__bar
    foo__bar--another-example
    foo--example__bar--another-example">...</div>
<div>

这种形式的 BEM 语法非常冗长。最好用于生成的代码。

---

我使用 LESS 进行 CSS 预处理，所以我的 BEM 代码通常如下所示：

.foo {
  ...

  &__bar {
    ...
  }
}

加上修饰符就变成了：

.foo {
  ...

  &__bar {
    ...
  }

  &--example {
    ...

    &__bar {
      ...
    }
  }
}

这会强制级联处于正确的顺序，并且所有选择器都继续拥有一个类。