CSS BEM, nest child elements or create new block?

Issue

I love the BEM concept, but I get extremely confused when an element has multiple child components, should I keep nesting elements or transform them into new blocks? or something else?

Real example:

<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>

or

<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>

thanks for any help

Solution

“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

Refer to the Grandchild Solution:

Instead of darpi-form__field__label you should just use darpi-form__label.

Answered By - Yong