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 >
  <div >
    <label ></label>
    <div >
      <input type="text" />
      <!-- .. -->
    </div>
    <span ></span>
  </div>

  <button ></button>
</form>

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

or

<form >
  <div >
    <label ></label>
    <div >
      <input type="text" />
      <!-- .. -->
    </div>
    <span ></span>
  </div>

  <button ></button>
</form>

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

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

thanks for any help

CodePudding user response：

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