我是否正在使用BEM方法？

Question

我想知道我的代碼是否正確使用了BEM。我不知道是否必須通過js-is-closed類來更改類form__label--close和form__input--close，因爲在單擊該元素時，該類將被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