1

私のチームと私は、BEM っぽいものを実装し始めました (この記事を出発点として使用しました)。私がこれまでに読んだことは理にかなっているようです。私が頭を抱えている大きな問題の 1 つは、変更されたコンポーネントの子のスタイルを設定する方法です。

たとえば、.avatarコンポーネント.avatar--alternate/修飾子があるとします。おそらく、代替の背景は白ではなく黒です。代替の見出しのスタイルを設定するために使用する CSS セレクターとは何ですか?またその理由は?

ここにシナリオを配置しました：

<div class="avatar">
  <h2 class="avatar-heading">Lorem ipsum...</h2>
</div>

<div class="avatar avatar--dark">
  <h2 class="avatar-heading">Lorem ipsum...</h2>
</div>

// _typography.scss
h1 {
  color: #000;
}

// _avatar.scss
.avatar {
  background: #fff;
}
.avatar--dark {
  background: #000;
}
.avatar-heading {
  color: #222;
}


// option A
.avatar--dark {
  .avatar-heading {
    color: #fff;
  }
}

// option B
.avatar-heading--dark {
  color: #fff;
}

// option C?

私の腸は、これが見出しをスタイルする最も具体的な方法ではなく、最も「スケーラブル」または「将来性」があるように見えるので、私に B と言っています。一方、A は非常に説得力があります。なぜなら、私.avatar-subHeadingも同様の可能性を持っている可能性があり、場合によってはいくつかの段落があり、その場合、分類 (?) に苦しみ始める可能性があるからです (例<h1 class="avatar-heading avatar-heading--dark">)

4

1 に答える 1

1

オプション C:

.avatar--dark > .avatar-heading {
    color: #fff;
}

これらのオプションはすべて正しいです。

.avatar-headingが常に.avatar--darkDOM ツリーの子である場合は、C を優先します。

コンポーネントが自身の内部に再帰的に含まれないことが確実な場合は、A を優先します。

それ以外の場合は B を使用してください。

NB: BEM 方法論では、2 番目にはコンポーネント クラスと修飾子クラスのdiv両方が必要です。avataravatar--dark

<div class="avatar avatar--dark">
于 2014-10-21T05:23:50.353 に答える