例如,我有一个名为:
.main-company-logo {
background: url(../images/logo_company.png);
width: 88px;
display: block;
text-indent: -9999999px;
height: 60px;
}
这个 block 恰好驻留在标题中,但也可以在任何地方。现在,如果它在页眉中,则需要向左浮动并且还要有边框。如果是这样,这是正确的做法吗:
.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 中为带有 float 和边框的 Logo 创建一个容器,并将 Logo 放在那里。
.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: block 中的独立 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19219175/