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

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

反正。
如果logoinheader有一些自定义样式，例如边距或不同的大小，您应该添加修饰符logo_modificator以自定义 logo in 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>