CSS の BEM 命名規則とは何ですか?

この章では、CSS における BEM 命名規則とは何なのかについて説明します。 、特定の参考値があり、困っている友人がそれを参照できます。お役に立てば幸いです。

BEM命名規則とは

Bemとは、ブロック、要素、修飾子の略語であり、Yandexチームが提案するフロントエンドCSSの命名方法論です。

- アンダースコア: ブロックまたはサブ要素の複数の単語間の接続マークを表すハイフンとしてのみ使用されます。
__二重下線: 二重下線は、ブロックとブロックのサブ要素を接続するために使用されます
_ 単一のアンダースコア: 単一のアンダースコアは、ブロックまたはブロックのサブ要素の状態を記述するために使用されます

BEM は、シンプルで非常に便利な命名規則です。フロントエンド コードを読みやすく理解しやすく、共同作業しやすく、制御しやすく、より堅牢かつ明確で、より厳密なものにします。

1. BEM 命名パターン

BEM 命名規則パターンは次のとおりです:

.block {}
.block__element {}
.block--modifier {}

各ブロック (ブロック) 名には名前空間 (プレフィックス) が必要です
ブロックは、より高いレベルの抽象化またはコンポーネントを表します。
Block__element は .block の子孫を表し、全体として完全な .block を形成するために使用されます。
block-modifier は、.block のさまざまな状態またはさまざまなバージョンを表します

独自のブロックを 1 つのハイフンで区切ることができるように、1 つではなく 2 つのハイフンとアンダースコアを使用します。例:

.sub-block__element {}
.sub-block--modifier {}

2. BEM 命名法の利点

BEM の鍵は、より多くの説明とより明確な構造を得ることができ、その名前から特定のマークの意味を知ることができることです。したがって、HTMLコード内のclass属性を見ることで、要素間の関係を知ることができます。

従来の命名規則の例:

<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

この書き方では、DOM構造やクラス命名から各要素の意味は理解できますが、本当の階層関係を明確にすることはできません。 CSS を定義するときは、コンポーネント間のスタイル汚染を避けるために、階層セレクターに依存して制約範囲を制限する必要もあります。

BEM 命名方法を使用した例:

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

BEM 命名方法を使用すると、モジュールの階層関係がシンプルかつ明確になり、CSS を記述するときに多くの階層を選択する必要がありません。

2. BEM 命名規則の使用方法

1. BEM 形式をいつ使用するべきか

BEM を使用するコツは、いつ、何を BEM 形式で記述すべきかを知る必要があることです。すべての場所で BEM 命名を使用する必要があるわけではありません。 BEM 形式は、明示的なモジュール関係が必要な場合に使用する必要があります。たとえば、パブリック スタイルが 1 つしかない場合、BEM 形式を使用する意味はありません:

.hide {    display: none !important;}

2. CSS プリプロセッサで BEM 形式を使用する

BEM の欠点は、命名方法が長くて見苦しいことです。 、そして文章はエレガントではありません。 BEM 形式がもたらす利便性と比較して、客観的に見る必要があります。さらに、CSS は一般的に LESS/SASS などのプリプロセッサ言語を使用して記述されており、その言語機能を使用して記述する方がはるかに簡単です。

LESS を例に挙げます:

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

3 人気のあるフレームワークのコンポーネントで BEM 形式を使用する
Vue.js / React / `Angular などの現在人気のあるフロントエンド フレームワークには、CSS コンポーネント レベルのスコープのコンパイル済み実装があり、基本原則は、CSS 属性セレクター機能を使用して、コンポーネントごとに異なる属性セレクターを生成することです。 。
このローカル スコープのアプローチを選択すると、小規模なコンポーネントでは BEM 形式の重要性が低くなる可能性があります。ただし、パブリックおよびグローバル モジュール スタイル定義の場合は、引き続き BEM 形式を使用することをお勧めします。
さらに、一般的にスタイルのカスタマイズを目的として外部にリリースされるパブリック コンポーネントの場合、このローカル スコープ メソッドはコンポーネント スタイルの定義には使用されません。このような場合にも、BEM 形式の使用が役立ちます。

4 .block__el1__el2 形式を避ける
深くネストされた DOM
構造上、長すぎるスタイル名の定義は避けてください。
最終レベルはレベル 4 を超えてはなりません。そうしないと、読解が難しくなります

3. まとめ

BEM の最も難しい部分の 1 つは、スコープがどこで始まり、いつ終わるのかを明確に理解することです。それを使うか、使わないか。継続して使用する経験を積むと、徐々に使い方がわかり、これらの問題は問題なくなります。良いテクノロジーも悪いテクノロジーもありません。正しいテクノロジーだけが最善です。

おすすめの書き方とスタイル

//常规写法：
.xxx{}
.xxx__item{}
.xxx__item_current{}

// 嵌套写法
.xxx__item_current .mod-xxx__link{}

推荐：
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

//对应的HTML结构如下：

<ul class="xxx">

	<li class="xxx__item">第一项

		<div class="xxx__product-name">我是名称</div>

		<span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>

		<a href="#" class="xxx__link">我是link</a>

	</li>

	<li class="xxx__item xxx__item_current">第二项 且 当前选择项

		<div class="xxx__product-name">我是名称</div>

		<a href="#" class="xxx__item-link">我是link</a>

	</li>

	<li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮

		<div class="xxx__product-name">我是名称</div>

		<a href="#" class="xxx__item-link">我是link</a>

	</li>
</ul>

以上がCSS の BEM 命名規則とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。