Question

假设我使用BEM和SCSS为通用列表组件提供以下CSS：

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

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

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

当我考虑 list__item 元素的余量时，我的问题就出现了。对于垂直列表，我希望我的边距位于底部，而不是每个项目的右边。如果我正确理解BEM，我无法根据列表的修饰符修改 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 {
      ...
    }
  }
}

这强制级联的顺序正确，并且所有选择器仍然只有一个类。

BEM：允许修饰的修饰符是什么？

1 个答案: