4

私は最近 BEM 構文をいじりましたが、BEM 要素について混乱しています。

ロゴとログインボックスを含むヘッダーがあります。だから私はこのような構造を作りました：

<header class="header clearfix">
    <div class="col-sm-6 col-xs-12">
        <a href="/" class="header__logo"></a>
    </div>
    <div class="col-sm-6 header__login">
        <div class="pull-right">
            <div class="login__email pull-left">
                <input type="text" id="email" placeholder="EMAIL ADDRESS">
            </div>
            <div class="login__password pull-left">
                <input type="password" id="password" placeholder="PASSWORD">
            </div>
            <div class="login__submit pull-left">
                <button class="uppercase">Login</button>
            </div>
        </div>
    </div>
</header>

ご覧のとおり、 and を使用.header__logoし.header__login、その内部で.header__login別のブロックを使用し.login__emailました。

したがって、私の質問は、BEM の概念を正しく使用しているのか、それともクラスを次のように読む必要があるのか​​ということです。

.header__login--email
.header__login--passowrd
.header__login--submit
4

2 に答える 2

1

この規則に慣れていない人のために説明すると、ブロック、要素、修飾子の方法論(一般に BEM と呼ばれるHTML) は、およびのクラスの一般的な命名規則ですCSS。その主な目標は、開発者が特定のプロジェクトにおけるHTMLとCSSの関係をよりよく理解できるようにすることです。

あなたは正しい軌道に乗っています....

使用する依存関係について __

/* Element that depends upon the block */ 
.btn__price {}

使用する修飾子について --

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}
于 2015-08-23T11:45:53.170 に答える