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 クロージャの説明

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

推薦する

Vueモバイル端末の適応化問題の詳細説明

1. vue uiでプロジェクトを作成する 2. 基本設定項目を選択する 3. プロジェクトを実行す...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...

Dockerコンテナオーケストレーション実装プロセス分析

実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...

vueの実践的な応用におけるvuexの永続性の詳細な説明

目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...

ネイティブ js カスタム右クリック メニュー

この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...

デザイン理論:フォントデザインの基礎

<br />言葉は、人間の思考や感情を伝えるために必然的に生み出されるものです。人類の文...

js は丸で囲まれた数字のリストのサンプルコードを動的に追加します

1. まず本文にulタグを追加します <!-- 順序なしリスト --> <ul i...

Web 上の要素を非表示にする方法とその利点と欠点

ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...

nuxt.js 複数の環境変数の設定

目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...

スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...

Dockerで複数のSpringbootを実行するための詳細なチュートリアル

Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...

VUE ユニアプリの基本コンポーネントの簡単な紹介

1. スクロールビュー垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する...

CSS3 でテキストマーキーを実装するためのサンプルコード

背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...

ethers.js を使用して Solidity スマート コントラクトをデプロイする方法

Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...