我使用的 BEM 方法是否正确？

Question

我想知道我的代码是否正确使用了 BEM。我不知道我是否必须通过某种 js-is-closed class 来更改 classes form__label--close 和 form__input--close，因为这个 class 是单击元素时按 javascript 删除。

这是我的 HTML 代码：

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

还有我的 Codepen link : http://codepen.io/koban/pen/rVgxpq

Answer 1

我倾向于使用状态类，它们以is-为前缀（is-active、is-closed、is-open等）。这些是可以添加的类，由 JavaScript 删除的。这使您的 JavaScript 保持良好和一致，并且意味着它对组件类没有任何了解，只有组件状态。

然后我根据状态类的存在设置组件样式。

.form__label {
    background: blue;
}

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

Answer 2

你的代码很好。而且你不需要使用任何 JS 特定类。将 BEM 中的块视为 Web 组件：它们使用相同的 BEM 术语将模板 (HTML)、样式 (CSS) 和行为 (JS) 封装在内部。

get/set/switch 修饰符的 JS 库相当多： https://github.com/hoho/jquery-bem https://github.com/zenwalker/jquery-bem

我使用的 BEM 方法是否正确？

Am I using the BEM methodology right?

html

bem