15

注: BEM ではブロックと呼ばれるモジュールという言葉を使用します。また、変更された BEM 命名規則を使用して、回答にもそれを使用してください。BLOCK__ELEMENT--MODIFIER

.btn次のようなモジュールがあるとします。

.btn {
  background: red;
  text-align: center;
  font-family: Arial;

  i {
    width:15px;
    height:15px;
  }
}

そして、内部に.popup-dialogモジュールを作成する必要があります。.btn

.popup-dialog {
  ...
  .btn {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

SMACSS と BEM では、モジュール内のモジュールの配置をどのように処理する必要がありますか?

あなたの答えでは、正しい解決策を特定し、次のアプローチも分析してください: (以下のすべての例は、上記の CSS に基づいて構築または変更されていることに注意してください)

アプローチ1

.btn[内の元のクラスをオーバーライド.popup-dialog]

CSS :

.popup-dialog {
  ...
  .btn {  // override the original .btn class
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

マークアップ:

<div class="popup-dialog">
  ...
  <button class="btn"><i class="close-ico"></i> close</btn>
</div>

アプローチ 2

[ の中にサブクラスを追加する.popup-dialog]

CSS :

.popup-dialog {
  ...
  .popup-dialog__btn {
    position: absolute;
    top: 10px;
    right: 10px;
  }
}

マークアップ:

<div class="popup-dialog">
  ...
  <button class="btn popup-dialog__btn"><i class="close-ico"></i> close</btn>
</div>

アプローチ 3

.btn[修飾子付きサブクラス]

CSS :

.btn--dialog-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

マークアップ:

<div class="popup-dialog">
  ...
  <button class="btn btn--dialog-close"><i class="close-ico"></i> close</btn>
</div>

アプローチ 4

[.btnレイアウト クラスを持つサブクラス]

CSS :

.l-dialog-btn {       // layout
  position: absolute;
  top: 10px;
  right: 10px;
}

マークアップ:

<div class="popup-dialog">
  ...
  <button class="btn l-dialog-btn"><i class="close-ico"></i> close</btn>
</div>
4

4 に答える 4

2

BEM

.btn内部を変更しない場合.popup-dialogは、最初のアプローチが最適です。

いくつかの変更が必要な場合は.btn、BEM 方法論に従って、次のようなモディフィケーター クラスを使用する必要があります。.btn_size_s

に直接接続されていない変更があり.btn、将来再利用できるかどうか疑問がある場合、たとえば.btn、ポップアップでのみ右にフロートする必要がある場合は、mixin のように使用できます。 .popup-dialog__btn

SMACSS

繰り返しますが、1 つのブロックを他のブロック内に配置する必要がある場合は、最初のアプローチに従います。

変更が必要な場合は、サブクラスと子孫セレクターの 2 つの方法があります。

変更が将来再利用される可能性がある場合は、 などのサブクラスを使用して.btn-size-sください。変更が特定のモジュールと密接に関連している場合は、子孫セレクターを使用することをお勧めします。

アップデート：

私の答えを明確にするためにいくつかのポイントを追加してください：

まず、アプローチ 4 は受け入れられません。グリッドとページ セクションのジオメトリを担当するレイアウト クラスとして、モジュールとレイアウトを混在させるのは悪い習慣です。モジュールはレイアウトから独立しており、配置されたセクションについて何も知らないはずです。

ここで、他のアプローチとその最適な使用方法についてコメントさせてください。

アプローチ 1 - 次のケースを考えてみましょう: Popup「閉じる」Buttonモジュールを持つモジュールがあります。、変更なし、フロートやマージンなし、その子だけでPopup何もしません。Buttonこれは、このアプローチが最適な場合です。

アプローチ 2 - 別のケース: PopupchildButtonがありますが、上余白を追加Buttonし、右にフロートする必要があります。ご覧のとおり、この変更は と密接に結びついておりPopup、他のモジュールには役に立ちません。このような「ローカル」な変更は、このアプローチの最適な使用法です。BEM では、このアプローチは混合としても知られています

アプローチ 3 - 最終的なケース:Popup子ボタンをButton使用しますが、より大きなボタンが必要です。このような変更されたボタンは再利用でき、他のモジュールやページに役立つ場合があります。BEM では、修飾子と呼ばれる

A2 と A3 の主な違いを示すために、 から削除ButtonしPopupて別の場所に配置します。A3 は影響しますButtonが、A2 は影響しません。

したがって、モジュールを子として使用するには、 A1 または A2を使用できます。コンテキストから独立してモジュールを変更する場合は、 A3 を使用する必要があります。

于 2014-07-15T12:39:26.397 に答える