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>

所以你可以看到我使用.header__logoand.header__login和里面.header__login我使用了单独的 block .login__email。

所以我的问题是我是否正确使用 BEM 概念，或者我的课程应该读成这样：

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

2 回答 2

1

我认为您的情况不适合 BEM 使用，因为您不能使用Element without 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 内使用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>

PS我更喜欢原始的 BEM 名称约定：

.block__element--modifier
与
.block__element_modifier（或.block__element_modifier_value）。

于 2015-08-23T18:14:16.953 回答
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 回答