How use BEM correctly with Sass [closed]

Question

I'm starting to use BEM methodology [BLOCK, ELEMENT, MODIFIER] and I have doubts about it.

Inside a section called 'participate', I have a form, so:

<section class="participate">
  <form class="participate__form">
    <label for="name" class="participate__form__label"></label>
    <input type="text" id="name" name="participate__form__input"/>

  </form>
</section>

And the CSS:

.participate {
 &__form {
   // css here
 }
 &__form__label {
   // css here
 }
 &__form__input {
   // css here
 }
}

The class is too large inside the form, so told me that the right would be go one level deep:

<section class="participate">
  <form class="participate__form form">
    <label for="name" class="form__label"></label>
    <input type="text" id="name" name="form__input"/>

  </form>
</section>

But how should I style this?

I'm using it like this:

.participate {
 .form {
   // CSS HERE
   &__label {
   // CSS HERE
   }
   &__input {
   // CSS HERE
   }
 }
}

But I really believe this is not the right approach. Please, can someone give me a light here?

Answer 1

At first, you don't need cascade .participate .form. Better to use mix: .participate__form + .form on the same DOM-node.

participate__form__label is also wrong usage of BEM-methodology. Use participate__form-label, or participate-form__label, or just form__label.

I'd do it like that:

<section class="participate">
  <form class="participate__form form">
    <label for="name" class="form__label"></label>
    <input type="text" id="name" name="form__input"/>
  </form>
</section>

Styles for participate block and __form element:

.participate {
  &__form {
    // outer styles here
  }
}

And styles for form itself

.form {
  &__label {
    // inner styles here for label
  }
  &__input {
    // and input customization
  }
}

If you still need customization for your form in participation context you can use modifiers:

.form--god-bless-participation {
  .form__label {
    // label customization
  }
}

In that way you're free to use your form whenever you need, and also you can replace your original form in participate block with another one, or even with form-like block.