CSS BEM 命名標準の概要 (推奨)

1 BEM命名標準とは

Bem は、ブロック、要素、修飾子の略語であり、Yandex チームによって提案されたフロントエンド CSS 命名方法です。

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

1.1 BEM命名パターン

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

。ブロック {}
.block__要素 {}
.block--修飾子 {}

• ブロックは、より高レベルの抽象化またはコンポーネントを表します。
• block__element は .block の子孫を表し、全体として完全な .block を形成するために使用されます。
• block--modifier は、.block のさまざまな状態またはバージョンを表します。

ハイフンとアンダースコアを 1 つではなく 2 つ使用する理由は、1 つのハイフンで独自のブロックを定義できるようにするためです。のように：

.サブブロック要素 {}
.sub-block--修飾子 {}

1.2 BEM命名法の利点

BEM の鍵は、より多くの説明とより明確な構造が得られ、タグの名前からその意味を知ることができることです。そのため、HTML コード内のクラス属性を確認することで、要素間の関係を知ることができます。

一般的な命名法の例:

<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="タグ"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

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

2 BEM命名法の使い方

2.1 BEM はいつ使用すべきですか?

BEM を使用するコツは、いつ何を BEM 形式で記述する必要があるかを知ることです。

すべてに BEM 命名法を使用する必要はありません。明示的なモジュール関係が必要な場合は、BEM 形式を使用する必要があります。

たとえば、公開スタイルシートが 1 つだけの場合は、BEM 形式を使用する意味はありません。

。隠れる {
    表示: なし !重要;
}

2.2 CSSプリプロセッサでのBEM形式の使用

BEM に対する不満の 1 つは、命名方法が長く、見苦しく、書きにくいことです。 BEM 形式がもたらす利便性と比較して、客観的に見る必要があります。

さらに、CSS は一般的に LESS/SASS などのプリプロセッサ言語を使用して記述されるため、その言語機能を使用すると記述がはるかに簡単になります。

LESS を例に挙げます。

。記事 {
    最大幅: 1200px;

    ＆__体 {
        パディング: 20px;
    }

    ＆__ボタン {
        パディング: 5px 8px;

        &--プライマリ {背景: 青;}
        &--成功 {背景: 緑;}
    }
}

2.3 一般的なフレームワークのコンポーネントでBEM形式を使用する

現在人気の高い Vue.js/React/Angular などのフロントエンド フレームワークには、CSS コンポーネント レベルのスコープのコンパイル実装があります。基本的な原則は、CSS 属性セレクター機能を使用して、さまざまなコンポーネントに異なる属性セレクターを生成することです。

このローカル スコープ アプローチを選択した場合、小さいコンポーネントでは BEM フォーマットはそれほど重要ではない可能性があります。ただし、パブリックのグローバル モジュール スタイル定義の場合は、BEM 形式を使用することをお勧めします。

さらに、外部にリリースされるパブリック コンポーネントの場合、スタイルのカスタマイズ性を考慮して、このローカル スコープ メソッドはコンポーネント スタイルの定義には通常使用されません。ここでも、BEM 形式を使用すると便利です。

2.4 .block__el1__el2形式を避ける

深くネストされた DOM 構造では、非常に長いスタイル名を定義しないようにしてください。

3 結論

BEM の最も難しい部分の 1 つは、スコープの開始と終了の位置、およびいつ使用するか、使用しないかを判断することです。経験を積むにつれて、徐々に使い方を習得し、これらの問題はなくなるでしょう。良い技術も悪い技術もありません。最も適したものが最良です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。