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

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 を応援していただければ幸いです。

<<:  JavaScript クロージャの説明

>>:  ウェブページを作る前に、これらのいわゆる仕様を見てみましょう

推薦する

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

インストールされていないバージョンの MySQL を使用する手順とパスワードを忘れた場合の解決策

最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...

HTML タイトル属性をラップする方法

数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...

CSS スティッキーレイアウトを使用してヘッダーを上部に配置する方法

適用シナリオ:新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 ...

Vueは完全な選択機能を実装しています

この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

Vue双方向バインディングの詳細な説明

目次1. 双方向バインディング2. 他のタグを選択した場合にも同じ結果になりますか? 答えはもちろん...

HTML の隠しフィールドの紹介と例

基本的な構文: <input type="hidden" name=&qu...

Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明

Keepalived のインストール: cd <keepalived_sourcecode_p...

Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...

ウェブカラーのコントラストと調和のテクニックの共有

色のコントラストと調和対照的な状況では、色の相互作用は単一の色によって与えられる感覚とは異なります。...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...

MySQLのexecute、executeUpdate、executeQueryの違い

execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...

CentOS6.7 mysql5.6.33 でデータファイルの場所を変更する方法

問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...

ドキュメントの場所の比較

<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...

mysql8.0.12 でルートパスワードをリセットする方法

データベースをインストールした後、誤ってインストール ウィンドウを閉じたり、長期間 root ユーザ...