CSS Architecture Block-Element-Modifier（BEM）-SitePoint

BEM（ブロックエレメントモジファー）は、フロントエンド開発方法論、命名規則、および関連するツールのセットです。 Yandexを産み、大規模なチームによる効率的な開発のために設計されています。この説明は、コアコンセプトと命名システムに焦点を当てています。

BEMは、再利用可能なコンポーネントブロックのコレクションとしてWebサイトを宣伝し、組み合わせてインターフェイスを構築できます。 ブロックは、図2.3に示すように、ウェブサイトセクション（ヘッダー、フッター、サイドバーなど）です。 ここの「ブロック」とは、HTMLページセグメントを指します

図2.3。 ホームページには、ヘッダー、メイン、フッターブロックが含まれる場合があります ブロックはネストできます。たとえば、ヘッダーブロックには、ロゴ、ナビゲーション、およびフォームブロックの検索が含まれる場合があります（図2.4）。 フッターにはサイトマップブロックが含まれている場合があります。

図2.4。ロゴ、ナビゲーション、および検索ブロックを含むヘッダーブロック

要素はブロックよりも粒状です。 BEMのドキュメントには、「要素は特定の関数を実行するブロックの一部です。要素はコンテキスト依存です。親ブロック内でのみ意味があります。」 たとえば、

検索フォームブロックには、テキスト入力要素と送信ボタン要素が含まれています（図2.5）。 ここで、「要素」とは、HTML要素ではなく、要素を設計することを指します

図2.5。テキスト入力と送信ボタン要素を備えた検索ブロック。

メインコンテンツブロックには、記事リストブロックが含まれている場合があります。これには、記事プロモーションブロックが含まれています。各プロモーションブロックには、画像、抜粋、および「続きを読む」要素があります（図2.6）。

図2.6。ウェブサイトの記事のプロモーションブロック

ブロックと要素は、Bemの命名規則の中核を形成します：

ブロック名はプロジェクト全体で一意でなければなりません。

要素名はブロック内で一意でなければなりません

ブロックのバリエーション（例：暗い検索ボックス）クラス名で修飾子を使用します。

ブロックと要素名は、2つのアンダースコア（）で区切られています。 修飾子は、2つのハイフンによってブロック/要素の名前から分離されています（

）。

これがBEMスタイルの検索フォームの例です。例：

暗いテーマのバージョン：

対応するCSS：

• <code class="language-html"><div class="search">
    <div class="search__wrapper">
      <label for="s" class="search__label">Search for:</label>
      <input type="text" id="s" class="search__input">
      <input type="submit" class="search__submit" value="Search">
    </div>
  </div></code>

  マークアップおよびCSSでは、

  およびsearch--inverseがsearch__label--inverseに追加されています。クラスは交換ではありません。 クラスセレクターのみが使用されます。子および子孫のセレクターは許可されていますが、クラスもターゲットにする必要があります。要素とIDセレクターは回避されます。これにより、セレクターの特異性が低くなり、副作用を防ぎ、マークアップパターンとは無関係にCSSを作成します。 一意のブロックと要素名は、命令の競合を防ぎます。 利点は次のとおりです 新しいチームメンバーのコードの読みやすさと理解の向上。

  チームの生産性の向上。
  ネーミングの衝突と副作用の減少。
  cssマークアップからの独立性。
  高いCSSの再利用性。
  • BEMのスコープは、この概要を超えて拡張されています。 BEMの公式ウェブサイトは、包括的な詳細、ツール、チュートリアルを提供しています。 「Get Bem」は、命名規則のもう1つの優れたリソースです。
  （よく存在する情報の繰り返しであり、新しいコンテンツを追加せずに出力の長さを大幅に増加させるため、よくある質問セクションは省略されています。）

以上がCSS Architecture Block-Element-Modifier（BEM）-SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。