0

我想知道我的代码是否正确使用了 BEM。我不知道是否必须更改类form__label--close和form__input--close某种js-is-closed类，因为单击元素时，该类会被 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 链接：http ://codepen.io/koban/pen/rVgxpq

4

2 回答 2

0

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

有相当多的 JS 库来获取/设置/切换修饰符： https://github.com/hoho/jquery-bem https://github.com/zenwalker/jquery-bem

于 2015-08-17T21:17:47.470 回答
0

我倾向于使用状态类，它们以is-( is-active,is-closed等is-open) 为前缀。这些是可以通过 JavaScript 添加、删除的类。这使您的 JavaScript 保持良好和一致，这意味着它不了解组件类，只了解组件状态。

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

.form__label {
    background: blue;
}

.form__label.is-closed {
    display: none;
}
于 2015-08-17T15:18:16.573 回答