BEM は、block、element、modifier の略語で、非常に便利な命名規則です。これにより、フロントエンド コードが理解しやすくなり、より厳密になります。次に、特定の bem 命名規則を見てみましょう。
1 BEM 命名規則とは何ですか?
Bem は、ブロック、要素、修飾子の略語で、Yandex チームによって提案されたフロントエンド CSS 命名方法です。
BEM は、シンプルで非常に便利な命名規則です。フロントエンド コードを読みやすく理解しやすく、共同作業しやすく、制御しやすく、より堅牢かつ明確で、より厳密なものにします。
1.1 BEM 命名パターン
BEM 命名規則のパターンは次のとおりです:
.block {} .block__element {} .block--modifier {}
ブロックは、より高いレベルの抽象化またはコンポーネントを表します。
block__element は .block の子孫を表し、全体として完全な .block を形成するために使用されます。
block -- 修飾子は、.block の異なる状態または異なるバージョンを表します。
1 つの代わりに 2 つのハイフンとアンダースコアを使用すると、独自のブロックを 1 つのハイフンで区切ることができます。例:
.sub-block__element {} .sub-block--modifier {}
1.2 BEM 命名法の利点
BEM の鍵は、より多くの説明とより明確な構造を得ることができ、その名前から特定のマークの意味を知ることができることです。したがって、HTMLコード内のclass属性を見ることで要素間の関係を知ることができます。
従来の命名法の例:
<p class="article"> <p class="body"> <button class="button-primary"></button> <button class="button-success"></button> </p> </p>
この書き方では、DOM構造やクラス命名から各要素の意味は理解できますが、本当の階層関係を明確にすることはできません。 CSS を定義するときは、コンポーネント間のスタイル汚染を避けるために、階層セレクターに依存して制約範囲を制限する必要もあります。
BEM 命名方法を使用した例:
<p class="article"> <p class="article__body"> <p class="tag"></p> <button class="article__button--primary"></button> <button class="article__button--success"></button> </p> </p>
BEM 命名方法を使用すると、モジュールの階層関係がシンプルかつ明確になり、CSS を記述するときに多くの階層を選択する必要がなくなります。
2 BEM 命名の使用方法
2.1 BEM 形式をいつ使用するべきか
BEM を使用する際のコツは、いつ、何を BEM 形式で記述すべきかを知る必要があることです。
すべての場所で BEM 命名を使用する必要があるわけではありません。 BEM 形式は、明示的なモジュール関係が必要な場合に使用する必要があります。
たとえば、パブリック スタイルが 1 つしかない場合、BEM 形式を使用する意味はありません:
.hide { display: none !important; }
2.2 CSS プリプロセッサで BEM 形式を使用する
BEM の欠点の 1 つは、命名方法が長くて醜いし、文章も洗練されていない。 BEM 形式がもたらす利便性と比較して、客観的に見る必要があります。
さらに、CSSは一般的にLESS/SASSなどのプリプロセッサ言語を使用して記述されており、その言語機能を使用して記述する方がはるかに簡単です。
例として挙げます:
.article { max-width: 1200px; &__body { padding: 20px; } &__button { padding: 5px 8px; &--primary {background: blue;} &--success {background: green;} } }
2.3 人気のあるフレームワークのコンポーネントでBEM形式を使用する
Vue.js / React / Angularなどの現在人気のあるフロントエンドフレームワークには、CSSコンポーネントがありますレベル スコープのコンパイルと実装の基本原則は、CSS 属性セレクター機能を使用して、コンポーネントごとに異なる属性セレクターを生成することです。
このローカル スコープの書き込み方法を選択すると、小規模なコンポーネントでは、BEM 形式はそれほど重要ではないように見えるかもしれません。ただし、パブリックおよびグローバル モジュール スタイル定義の場合は、引き続き BEM 形式を使用することをお勧めします。
さらに、一般にスタイルのカスタマイズを目的として外部にリリースされたパブリック コンポーネントの場合、このローカル スコープ メソッドはコンポーネント スタイルの定義には使用されません。このような場合にも、BEM 形式の使用が役立ちます。
2.4 .block__el1__el2 形式を避ける
深くネストされた DOM 構造では、長すぎるスタイル名の定義は避けるべきです。
3 概要
BEM で最も難しい部分の 1 つは、スコープの開始位置と終了位置、およびスコープをいつ使用するかどうかを把握することです。使い続けて経験を積むと、徐々に使い方が分かり、これらの問題は問題なくなります。良い技術も悪い技術もありません。正しい技術だけが最善です。
関連する推奨事項:
[英語] BEM を使用して CSS コードをモジュール化する_html/css_WEB-ITnose
以上がCSS BEM 命名規則とは何ですか? BEM 命名規則の概要 (詳細)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。