13

BEM を使用する場合、クラス名は HTML 構造を直接反映するべきではないことは理解していますが、ラッパー要素にはどのように名前を付ける必要がありますか? 私の特定の構文を無視してください（ SUITに近い）; 要素を区別する方法が異なるだけで、BEM に従います。

例えば：

<div class="?">
  <footer class="PageFooter">
    <h4 class="PageFooter-brand>…&lt;/h4>
    <ul class="PageFooter-contactDetails">…&lt;/ul>
  </footer>
<div>

私は現在、このインスタンスのラッパーを として分類しますがPageFooterWrapper、ラッパーは独立していないため、これはぎこちなく感じます。純粋にPageFooter. 明らかに、すべてにプレフィックスを付けるのPageFooter-はばかげているため、ラッパーをPageFooter:の一部として扱うだけですPageFooter-wrapper。これによって適用される暗黙の提案があるので、これは私をいらいらさせます。

では、ラッパーのクラスはどうあるべきでしょうか?

4

2 に答える 2

8

私は実際に 2 つのクラスを正常に使用しました。私のパターンは次のとおりです。

<div class='page-section bem-block'>
    <div class='bem-block__element'>
        <!-- etc etc -->
    </div>
</div>

ユーティリティ クラスを効果的に使用して、特定のラッパー関数を実行します。css は次のようになります。

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

これは実際にうまく機能することがわかりました。.bem-blockから継承することも可能です.page-section。

このソリューションは、Dan Gamble のソリューションを補完します。

于 2015-07-16T21:09:37.760 に答える