Html CSS中的边界元概念

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

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

---

对于本惯例的新成员，块、元素、修改器方法（通常称为BEM）是

HTML

和

CSS

中类的常用命名约定。其主要目的是帮助开发人员更好地理解给定项目中HTML和CSS之间的关系

你在正确的轨道上

对于依赖项，我们使用

\uuu

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

对于修饰符，我们使用

--

---

我认为您的案例不适合BEM使用，因为没有块，您无法使用元素：

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

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

<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\u login--email

等）的假设也不正确，因为你不能在没有块的情况下使用修饰符，元素，也不能在另一个相同的元素中使用元素：

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

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

<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.我更喜欢：

.block\u元素--修饰符

vs

.block\uuu-element\u-modifier

（或

.block\uu-element\u-modifier\u-value

）