1 BEM命名標準とは Bem は、ブロック、要素、修飾子の略語であり、Yandex チームによって提案されたフロントエンド CSS 命名方法です。 BEM はシンプルですが、非常に便利な命名規則です。フロントエンド コードを、読みやすく理解しやすく、共同作業しやすく、制御しやすく、より堅牢かつ明示的に、より厳密にします。 1.1 BEM命名パターン BEM 命名規則のパターンは次のとおりです。 。ブロック {} .block__要素 {} .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 を応援していただければ幸いです。 |
>>: ウェブページを作る前に、これらのいわゆる仕様を見てみましょう
1. vue uiでプロジェクトを作成する 2. 基本設定項目を選択する 3. プロジェクトを実行す...
VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...
実際の開発環境や本番環境では、コンテナを独立して実行することはあまりなく、複数のコンテナを一緒に実行...
目次vuex 永続性要約するvuex 永続性vuex: ブラウザを更新すると、vuexの状態は初期状...
この記事の例では、参考のためにjsカスタム右クリックメニューの具体的なコードを共有しています。具体的...
<br />言葉は、人間の思考や感情を伝えるために必然的に生み出されるものです。人類の文...
1. まず本文にulタグを追加します <!-- 順序なしリスト --> <ul i...
ソースコードの例: https://codepen.io/shadeed/pen/03caf6b36...
目次1. はじめに2. シナリオ3. 環境を整える3.1 環境変数の挿入4. 最後に1. はじめに一...
一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS ...
Dockerは複数のSpringbootを実行する1番目: ポートマッピング 2番目: メモリサイズ...
1. スクロールビュー垂直スクロールを使用する場合は、固定の高さを指定して CSS で高さを設定する...
背景何が起こったかというと、Luzhu は偶然、宇宙で最高の外部スピーカーを備えた携帯電話について知...
Ethereum 上で DApps を開発したことがある場合は、フロントエンド JavaScript...
序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...