Question

为每个BEM方法编写以下标记的正确方法是：

HTML：

<div class="col-sm-12 header">
    <div class="logo">
        <img class="logo__img" src="images/logo.png" />
    </div>
</div>

CSS：

header {}
logo{}
logo__img{}

或

HTML：

<div class="col-sm-12 header">
    <div class="header__logo">
        <img class="logo__img" src="images/logo.png" />
    </div>
</div>

CSS：

header {}
header__logo{}
logo__img{}

Answer 1

您有两个区块：header和logo。 Logo有一个元素 - image。基本结构是：

header {}
logo {}
logo__image {}

首先你应该决定真的需要包装div吗？也许你可以写：

<img class="logo" src="images/logo.png" />

反正。
如果logo中的header包含某些自定义样式（例如边距或不同尺寸），则应添加修饰符logo_modificator以自定义header中的徽标。

logo {}
logo_modificator {}
logo__image {}
logo_modificator logo__image {}

我还建议您将col和header分开。

<div class="col-sm-12">
    <div class="header">
        <div class="logo">
            <img class="logo__img" src="images/logo.png" />
        </div>
    </div>
</div>

根据BEM方法编写以下标记的正确方法？

1 个答案: