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

Posted 2023-02-23

【中文标题】BEM：允许修改哪些修饰符？

【英文标题】：BEM: What are modifiers allowed to modify?

【发布时间】：2017-03-07 16:20:31

【问题描述】：

假设我有以下 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 的另一个修饰符处理边距？另一个完全用于垂直列表的块？

【参考方案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 
      ...
    
  

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

【讨论】：

谢谢！只是为了确定：您会考虑我发布的最后一个示例代码“有效”吗？

@Malax，使用后代选择器是有效的，但我绝对建议尽可能避免使用它们。有时，避免将额外的修饰符类添加到每个单独的子元素会快得多。但我遇到过它后来又咬我的情况。因为 LESS 和 Sass 使继承变得如此简单，所以请考虑您是否希望拥有一个 vertical-list 块和一个 horizontal-list 块，每个块都从基本 list 块继承。