CSS BEM, nest child elements or create new block?

February 10, 2022

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>

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