CSS 中的 BEM 概念

Question

我最近在玩 BEM 语法，我对 BEM 元素感到困惑。

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

所以你可以看到我使用 .header__logo 和 .header__login 并且在 .header__login 内部我使用了单独的块 .login__email.

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

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

Answer 1

对于不熟悉此约定的人，块、元素、修饰符方法（通常称为 BEM )是HTML和CSS中类的流行命名约定。其主要目的是帮助开发者更好地理解[=之间的关系给定项目中的 29=]HTML 和 CSS。

你走在正确的轨道上....

对于依赖我们使用 __

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

我们使用的修饰符 --

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

Answer 2

我认为你的情况不适合使用 BEM，因为你不能在没有 Block 的情况下使用 Element:

<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[= 的情况下使用 Modifier 48=]/Element 并且不能在另一个相同的 Element:[=22 中使用 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>

P.S. 我更喜欢 original BEM name convention:

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

CSS 中的 BEM 概念

BEM concept in CSS

html

css

twitter-bootstrap

bem