Am I using the BEM methodology right?

Question

I was wondering if my code was using BEM right. I don't know if I must change the classes form__label--close and form__input--close by a sort of js-is-closed class, because this class is remove by javascript when clicking on the element.

Here's my HTML code :

<form class="form">
  <h1 class="form__title">Sign in</h1>
  <div class="form__group">
    <label class="form__label  form__label--close" for="email-id">Email ID</label>
    <input type="email" class="form__input  form__input--email  form__input--close" id="email-id">
  </div>
  <div class="form__group">
    <label class="form__label  form__label--close" for="password">Password</label>
    <input type="password" class="form__input  form__input--password  form__input--close" id="password">
  </div>
  <a class="form__link" href="#">Forgot Password ?</a>
  <button type="submit" class="form__submit">Login</button>
  <a href="#" class="reset reset--hide">Reset</a>
</form>

And my Codepen link : http://codepen.io/koban/pen/rVgxpq

Answer 1

I tend to use state classes, these are prefixed with is- (is-active, is-closed, is-open etc.). These are the classes that can be added, removed by JavaScript. This keeps your JavaScript nice and consistent and means it does not have any knowledge of the component classes just the components state.

I then style the component based on the presence of the state classes.

.form__label {
    background: blue;
}

.form__label.is-closed {
    display: none;
}