BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独立したブロックに分割し、複雑な UI インターフェイスをより簡単かつ迅速に開発し、コピー アンド ペーストせずに既存のコードを再利用できるようにするというアイデアです。 BEM は、ブロック、要素、および修飾子で構成されます。セレクターでは、関係を拡張するために次のコネクタが使用されます。
例: ブロック名_修飾子名 ブロック名__要素名--修飾子名 ブロック名_修飾子名--修飾子値 ブロック名__要素名--修飾子名--修飾子値 基本概念 ブロック コード スニペットは再利用でき、このコードは他のコンポーネントに依存しません。つまり、ブロックを使用できます。ブロックは任意の深さまで相互にネストできます。
要素 要素はブロックの一部であり、独立して存在しません。任意の要素は意味的にブロックにバインドされます。 特徴:
修飾子 修飾子は、ブロックまたは要素上のタグです。これらを使用して、スタイル、動作、または状態を変更します。ブロックまたは要素のコネクタは '--' です。 応用 ブロックを他のブロックに対して相対的に配置 最善のアプローチは、ブロックと要素を組み合わせて使用することです。ブロック上で余白と位置を設定できない問題を解決します。 例: <body class="page"> <!-- ヘッダーとナビゲーション--> <header class="header page__header">...</header> <!-- フッター --> <footer class="footer page__footer">...</footer> </本文> .page__header { パディング: 20px; } .page__footer { パディング: 50px; } ブロック内の要素の配置 ネスト化は、ブロックの追加の子要素を作成することによって実現されます。 例: <body class="page"> <div class="page__inner"> <!-- ヘッダーとナビゲーション--> <header class="header">...</header> <!-- フッター --> <footer class="footer">...</footer> </div> </本文> .page__inner { 右マージン: 自動; 左マージン: 自動; 幅: 960ピクセル; } 命名について セレクター名は、それが表す BEM エンティティを完全に正確に記述する必要があります。 例: 。ボタン {} .ボタン__アイコン {} .ボタン__テキスト {} .button_theme_islands {} ブロック要素を扱っていることを直接指示できます。 html では次のように使用します: <button class="button button_theme_islands"> <span class="button__icon"></span> <span class="button__text">...</span> </ボタン> 次の CSS では、同じ判断を下すのが困難になります。 。ボタン {} .アイコン {} 。文章 {} .theme_islands {} 私は自分の git プロジェクト miniui で BEM 仕様を採用し、sass を使用して BEM を実装しました。ご興味がございましたら、こちらをご覧ください: https://github.com/banyaner/miniui 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: Docker を使用した Alibaba Cloud Server のインストールと、仮想マシンへのインストールで遭遇する落とし穴 (問題のまとめ)
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
この記事の例では、WeChatアプレットのビデオプレーヤーコンポーネントの具体的なコードを参考までに...
序文JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ています...
1. 前提条件インポートには require.context メソッドを使用します。vite で作成...
目次1. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...
MySQLデータベースの接続が多すぎますこのエラーは明らかに、mysql_connect の後に m...
HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...
目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...
簡単な説明エディターはデータベースのエンコードが間違っているために問題に遭遇することが多く、これは頭...
nginx で仮想ホスト vhost を設定すると非常に便利です。 nginx設定ファイルnginx...
序文オプションの連鎖演算子 (?.) を使用すると、チェーン内の各参照が有効であることを明示的に検証...
MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
以下では、よく使われるヘッド構造と、各タグや要素の意味や使用シーンを紹介します(この記事は、Yisi...