html – CSS中的BEM概念

我最近玩过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>

因此,您可以看到我使用.header__logo和.header__login以及.header__login内部我使用了单独的块.login__email.

所以我的问题是我是否正确使用BEM概念,或者我的课程应该像:

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

最佳答案 我认为您的案例不适合BEM使用,因为您不能使用Element而不使用Block:

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

你必须有.login块.我会做这样的事情:

<div class="col-sm-6 header__login">
    <div class="login pull-right">
        <div class="login__email pull-left">
            <input type="text" id="email" placeholder="EMAIL ADDRESS">
        </div>
        ...
    </div>
</div>

你对修饰符(.header__login – email等)的假设也不对,因为你不能使用没有Block / Element的Modifier而不能在另一个元素中使用Element:

<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="header__login header__login_email pull-left">
                <input type="text" id="email" placeholder="EMAIL ADDRESS">
            </div>
            <div class="header__login header__login_password pull-left">
                <input type="password" id="password" placeholder="PASSWORD">
            </div>
            <div class="header__login header__login_submit pull-left">
                <button class="uppercase">Login</button>
            </div>
        </div>
    </div>
</header>

所以,我的建议只是添加.login块,它对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="login 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>

你也可以使用单独的块,它也可以:

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

附:我更喜欢original BEM name convention

.block__element – 修改
VS
.block__element_modifier(或.block__element_modifier_value).

点赞