ホームページ > 記事 > ウェブフロントエンド > CSS BEM 命名規則とは何ですか? BEM 命名規則の概要 (詳細)

CSS BEM 命名規則とは何ですか? BEM 命名規則の概要 (詳細)

不言オリジナル: 2018-07-27 17:04:074291ブラウズ

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 つは、スコープの開始位置と終了位置、およびスコープをいつ使用するかどうかを把握することです。使い続けて経験を積むと、徐々に使い方が分かり、これらの問題は問題なくなります。良い技術も悪い技術もありません。正しい技術だけが最善です。

CSS BEM 命名規則とは何ですか? BEM 命名規則の概要 (詳細)

関連記事