CSS BEM，嵌套子元素还是创建新块？

Question

我喜欢 BEM 的概念，但是当一个元素有多个子组件时我感到非常困惑，我应该继续嵌套元素还是将它们转换成新的块？还是别的？

真实例子：

<form class="darpi-form">
  <div class="darpi-form__field">
    <label class="darpi-form__field__label"></label>
    <div class="darpi-form__field__content">
      <input type="text" />
      <!-- .. -->
    </div>
    <span class="darpi-form__field__error-message"></span>
  </div>

  <button class="darpi-form__button"></button>
</form>

<style>
  .darpi-form {}
  .darpi-form__field {}
  .darpi-form__field__error-message {}
  .darpi-form__field__content {}
  .darpi-form__button {}
</style>

或

<form class="darpi-form">
  <div class="field">
    <label class="field__label"></label>
    <div class="field__content">
      <input type="text" />
      <!-- .. -->
    </div>
    <span class="field__error-message"></span>
  </div>

  <button class="darpi-form__button"></button>
</form>

<style>
  .darpi-form {}
  .darpi-form__button {}

  .field {}
  .field__error-message {}
  .field__content {}
</style>

Answer 1

“BEM methodology doesn’t recommend to use elements within elements in class names. You don’t need to resemble DOM structure in naming. Having one level structure makes refactoring much easier.” -Vladimir Grinenko, Yandex

参考Grandchild Solution:

而不是 darpi-form__field__label 你应该只使用 darpi-form__label.

CSS BEM，嵌套子元素还是创建新块？

CSS BEM, nest child elements or create new block?

html

css

bem