1

たとえば、次のようなスタンドアロン ブロックがあります。

.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;
  }

2つのうちどちらが優れていますか？

4

1 に答える 1

2

最初のものは大丈夫です。ただし、完全にコンテキストに依存しないソリューションが必要な場合は、フローティングとボーダーを使用してロゴのヘッダーにコンテナーを作成し、そこにロゴを配置することをお勧めします。

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

別の方法は、このようなミックスインを使用する必要があります

<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] }
于 2013-10-07T11:02:01.747 に答える