4

サブモジュールにあるモジュール要素に変更を加える必要がある場合、BEM を使用して css を記述する場合、モジュール要素をサブモジュールにネストするか、モジュール要素の新しいクラス名を作成しますか?

新しいクラスの作成

新しいクラス名 (つまりmodule--modifier__element) を作成することは、BEM の精神に近いようです。不必要な特異性を防ぎます。ただし、モジュール内の各要素に追加のクラスを追加するという多くの余分な作業も追加されます。

ネスティング

モジュール修飾子内に既存の要素クラスをネストする (つまり、module--modifier module__element {}特定性が追加されますが、(少なくとも大規模なモジュールの場合) 多くの作業が節約され、マークアップの保守が容易になります。たとえば、モジュールの修飾子を変更する必要がある場合)。すべての子要素で変更するのではなく、マークアップの 1 か所だけ変更する必要があります。

それに加えて、すべての子要素が変更されない場合は、css を参照して、どの子要素にクラスを追加する必要があるかを判断する必要があります。

サンプルコード 

.module {
  display: block;
  width: 90%;
  height: 2rem;
  margin: 2rem auto;
  padding: 0.5em;
  background: #fff;
  border: 2px solid #333;
}

.module--modified1 {
  background: #333;
  border: none;
}

.module--modified2 {
  background: #baa;
  border: 3px solid #8f8;
}

  .module__element {
    color: #333;
    text-align: center;
  }

  /* Option 1 */
  /* In sass this would actually be nested within the module_modified1 block */
  .module--modified1 .module__element {
    color: #fff;
  }

  /* Option 2 */
  .module--modified2__element {
    color: #fff;
    font-size: 1.3em;
  }
<div class="module">
  <div class="module__element">Module</div>
</div>

<div class="module module--modified1">
  <div class="module__element">Module Modifier 1</div>
</div>

<div class="module module--modified2">
  <div class="module__element module--modified2__element">Modulue Modifier 2</div>
</div>

4

1 に答える 1

0

どちらのオプションも有効です。具体性を減らすことは良い習慣ですが、コードを単純にすることも良い習慣です。

ただし、BEM ブロックはコンテキストフリーでなければなりません。ブロックをそれ自体に再帰的に含めることができる場合は、カスケードを避ける必要があります。たとえば、ジェネリック ブロックは次のfun-rounded-blockように再帰的に再利用できます。

<div class="fun-rounded-block fun-rounded-block--blue-version">
    <div class="fun-rounded-block__content">
        <div class="some-block-here">
            <div class="fun-rounded-block">
                <p class="fun-rounded-block__content">element in the sub-block here</p>
            </div>
        </div>
    </div>
</div>

.fun-rounded-block--blue-version .fun-rounded-block__contentこの例では、セレクターがサブブロックに干渉するため、スタイル要素にカスケードを使用できません。

于 2015-06-21T09:42:04.573 に答える