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 を応援していただければ幸いです。 |
>>: ウェブページを作る前に、これらのいわゆる仕様を見てみましょう
Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...
最初のステップは、圧縮されたパッケージを対応するディスクに解凍することです。 2 番目の手順は、cm...
数日前にプログラムを書いていたとき、プロンプト情報 (TITLE) を新しい行で囲みたいと思いました...
適用シナリオ:新しい要件の 1 つはアンケート調査を行うことですが、必然的に多くの質問が含まれ、1 ...
この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
目次1. 双方向バインディング2. 他のタグを選択した場合にも同じ結果になりますか? 答えはもちろん...
基本的な構文: <input type="hidden" name=&qu...
Keepalived のインストール: cd <keepalived_sourcecode_p...
目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...
色のコントラストと調和対照的な状況では、色の相互作用は単一の色によって与えられる感覚とは異なります。...
XHTMLの img タグは、次のように記述する必要があります: <img alt="...
execute、executeUpdate、executeQuery の違い (およびそれらの戻り値...
問題: MySQL がデータ ファイルを保存するパーティションの容量が小さく、現在いっぱいになってい...
<br />2 年前に PPK が投稿した素晴らしいブログ記事では、contains()...
データベースをインストールした後、誤ってインストール ウィンドウを閉じたり、長期間 root ユーザ...