SASS中的BEM语法

Question

我有一个简单的HTML和CSS，采用BEM命名法。我想为类.block__item-header--has-round内的类.block__item-header-mark添加样式。

我使用了CSS .block__item-header--has-round .block__item-header-mark { /在这里添加样式/ }。但我认为这不是好的语法。

我的问题是：

1. 如何在我的SCSS代码中更好地调用.block__item-header--has-round内的.block__item-header-mark？
2. 我的BEM语法是否正确？

代码

.block {
  &__item {
    &-header {
      &--has-round {
        /* How to call .block__item-header-mark with better syntax ??? */
        .block__item-header-mark {
          /*overide style*/
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}

<div class="block">
  <div class="block__item">
    <div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
    <div class="block__item-body"></div>
  </div>
</div>

- Phát Nguyễn

---

这是一个完全可行的方法。 - Obsidian Age

在你的 HTML 中使用 BEM 类是完美的。在 CSS 中，我认为你不需要使用所有层次结构，因为如果你需要一些选择器来覆盖你的样式，那么数学会很难。尽可能限制你的 CSS 选择器的特定性。 - Toan Lu

Answer 1

你可以创建一个变量来引用你想要的作用域。

.block {
  &__item {
    &-header {
      $header: &;
      &--has-round {
        #{ header }-mark {
          /* override style */
        }
      }
      &-mark {
        /*normal style*/
      }
    }
  }
}

- iagowp

---

“&--has-round &-mark” <- 这不会违反BEM规范吗？ - zerkms

@zerkms 我不认为它违反了规定，但是我已经有一段时间没有使用 BEM 了，所以我可能是错的。 - iagowp

在BEM方法论中，“这个块结构总是表示为一个元素的平面列表：” BEM意味着您不使用级联。 - zerkms

@zerkms has-round是一个修饰符，所以我看到的实际错误是它应该是&_has-round &-mark。 - iagowp

是的，但 &--has-round &-mark 是级联的，不再是“平”的了。 - zerkms

在我的印象中，修饰语并不是平的。级联与平的相反有着非常不同的含义，所以在你的第二条评论中让我有些困惑。我会编辑我的回答。 - iagowp