BEM (Block, Element, Modifier) とは何ですか? Drupal Emulsify Twig でどのように使用できますか?

公開: 2022-11-08

オープンソースのテクノロジとソフトウェアを扱う場合、コードを読んで理解するために必要な労力を簡素化することがさらに重要です。適切な命名規則は、コードレビュー中に構文やスタイルの設定に集中するのではなく、より大きな問題を解決するのに役立ちます。経験豊富な開発者は、大量のスタイル要素を含む大規模な Web サイトで作業する場合、適切に作成され、整理されたコードの重要性を理解しています。

BEM (Block, Element, Modifier) 手法は、CSS クラスで広く使用されている命名規則であり、その使いやすさから人気が高まっています。 BEM の基本的な概念は、コンポーネントベースの Web 開発です。 BEM を使用すると、特に複雑な UI を持つ大規模なプロジェクトを処理する場合に、インターフェイスの開発を簡単かつ迅速に行うことができます。 BEM と、それが Drupal Emulsify Twig モジュールでどのように機能するかについて詳しく見ていきましょう。

BEMとは

BEM 方法論は、CSS クラスへのアクセス、理解、スケーリングを容易にするために導入されました。開発プロセスを加速し、再利用可能なコンポーネントを構築するのに役立ちます。

BEM には次の 3 つの部分があります。

ブロック
エレメント
モディファイア

ブロック

ブロックは、機能的に独立した最も外側のコンポーネントであり、再利用可能です。例: ヘッダー、フッター、サイドバー、メニュー、コンテンツなど。

特徴：

ブロック名は常にブロックの目的を反映する必要があります。
ブロックはマージンまたは位置を使用しないでください。マージンまたは位置を追加する必要がある場合は、内側のコンテナーに適用する必要があります。
BEM を使用する場合は、CSS タグまたは ID セレクターを使用しないでください。

例：

 <div class=”icon-button”></div>

エレメント

要素はブロックの子アイテムです。各要素は 1 つのブロックのみを持つことができ、それ以外では使用できません。例: メニュー項目、リスト項目、入力フィールドなど

特徴：

要素名 (クラス) は、その状態 (小/赤) ではなく、その目的 (タイトル、キャプション) を説明する必要があります。
要素とブロックは、2 つのアンダースコア (__) で区切られます。次のように: block-name__element-name.

例：

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

モディファイア

ブロックまたは要素の外観、状態、または動作を定義できるクラス名。例: 赤、大、無効、固定など。

特徴：

モディファイヤ名は、その外観を表しています。たとえば、外観が「_large」の場合、修飾子クラスはicon-button__title_largeになります。
修飾子は、単一のアンダースコア (_) によってブロックまたは要素から分離されます。

例：

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

修飾子の種類

1.ブール値

ブール値の状態を確認し、変数に設定できます。この変数は修飾子の値として渡すことができます。

2. キー値

Key-Value を含む修飾子の完全な名前の構造は、次のいずれかのパターンに従います。

ブロック名_修飾子名_修飾子の値
ブロック名__要素名_修飾子名_修飾子値

命名規則: ルールとスキーム

さまざまな命名スキームがあります。すべてのスキームには、次のような共通のルールがあります。

名前は小文字のラテン文字で書かれています。
単語はハイフン (-) で区切られます。

1. 古典的な命名スキーム

従来の命名スキームは、BEM のデフォルトの命名スキームです。

ブロック名__要素名_mod-name_mod-val

要素名とブロック名は、2 つのアンダースコア (__) で区切られます。
修飾子名とブロックまたは要素名は、単一のアンダースコア (_) で区切られます。
修飾子の値と修飾子の名前は、単一のアンダースコア (_) で区切られます。

2. 2 つのダッシュの命名スタイル

ブロック名__要素名--mod-name--mod-val

要素とブロック名は、2 つのアンダースコア (__) で区切られます。
ブロックと要素は、2 つのハイフン (--) で区切られます。
修飾子と修飾子の値は、2 つのハイフン (--) で区切られます。

3. キャメルケースの命名スタイル

blockName-elemName_modName_modVal

最初の単語の後の各単語は大文字で始まります。
ブロック、要素、および修飾子は、標準の命名スキームと同じ方法で使用されます。

4. React 命名スタイル

BlockName-ElemName_modName_modVal

ブロックの名前と要素の名前は大文字で始まります。
修飾子の名前は小文字で始まります。
要素名とブロック名は、単一のハイフン (-) で区切られます。
修飾子の名前と値は、標準スキームと同じ方法で分離されます。

Emulsify Twig モジュールを使用した Drupal の BEM

Drupal では、Emulsify Twig モジュールの助けを借りて BEM Twig 関数を使用できます。 BEM 関数を使用すると、コンポーネント内の要素に BEM クラスを作成できます。以下は、いくつかの BEM Twig 拡張機能とその使用法です。

1. 単純なブロック名 (必須の引数):

これにより、次が作成されます。

2. モディファイヤでブロック:

複数の修飾子を追加する場合は、配列を使用して行うことができます。

これにより、次が作成されます。

3. 修飾子とブロック名を持つ要素 (オプション):

これにより、次が作成されます。

4. ブロック名はあるが修飾子がない要素 (オプション):

これにより、次が作成されます。

5. ブロック名、修飾子、および追加のクラスを含む要素:

これにより、次が作成されます。

6. 追加のクラスのみを持つ要素 (オプション):

これにより、次が作成されます。

属性の追加 Twig 拡張機能

Add attributes Twig 関数を使用すると、コンポーネントの要素に HTML 属性を追加できます。以下の Add Attributes 関数をいくつか見てみましょう。

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

最終的な考え

BEM 方法論は、簡単に引き渡して理解できる、より高品質のコードを作成して維持したい開発者にとって非常に便利です。すべての要素には目的があり、その名前とそれがどのブロックから来ているかによって簡単に識別できます。正しく使用すると、BEM を使用すると開発速度が向上することがわかります。読んだ内容が気に入った場合は、毎週のニュースレターにサインアップしてください。これにより、新鮮で熱烈な洞察が受信トレイに送信されます。