Question

我想知道我的代码是否正确使用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

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

有很多JS库可以获取/设置/切换修饰符： https://github.com/hoho/jquery-bem https://github.com/zenwalker/jquery-bem

我使用BEM方法吗？

2 个答案: