CSS BEM, nest child elements or create new block?

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>