css - BEM:块中的独立块

例如，我有一个名为的独立块：

.main-company-logo {
  background: url(../images/logo_company.png);
  width: 88px;
  display: block;
  text-indent: -9999999px;
  height: 60px;
}

该块恰好位于标头中，但也可以位于任何位置。现在，如果在标题中，则需要将其浮动到左侧并具有边框。如果是这样，这是正确的做法吗：

.header-main { [properties] }
  .header-main .main-company-logo {
    float: left;
    border: 1px solid #FFF;
  }

或按照BEM：

.main-company-logo { [properties] }
  .main-company-logo--main-header {
    float: left;
    border: 1px solid #FFF;
  }

两者哪一个更好？

最佳答案

第一个还可以。但是，如果您想要一个完全独立于上下文的解决方案，我建议您在带有浮标和边框的徽标标头中制作一个容器，并在其中放置徽标。

.header-main { [properties] }
.header-main--logo {
    float: left;
    border: 1px solid #FFF;
}
.main-company-logo { [properties] }

并像这样使用

<div class="header-main">
    <div class="header-main--logo">
        <img class="main-company-logo"/>
    </div>
</div>

另一种方法应该使用这样的mixin

<div class="header-main">
    <img class="header-main--logo main-company-logo"/>
</div>

用这样的CSS

.header-main { [properties] }
.header-main--logo.main-company-logo {
    float: left;
    border: 1px solid #FFF;
}
.main-company-logo { [properties] }

关于css - BEM:块中的独立块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19219175/