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 のインストールと、仮想マシンへのインストールで遭遇する落とし穴 (問題のまとめ)
目次1. リソースのダウンロード2. ソフトウェアを解凍する2.1 場所を選択する2.2 名前を変更...
テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...
RedisはRedisバージョン5のapline(Alps)イメージを使用します。これは小さくて高速...
これにより、png ファイルのアップロードも不可能になりました (後で情報を調べたところ、レジストリ...
.NET SDK ダウンロード リンクhttps://dotnet.microsoft.com/do...
当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...
MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...
1. はじめに● ランダム書き込みではヘッドがトラックを頻繁に変更するため、効率が大幅に低下します。...
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...
前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...
Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...
nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...