CSS BEM 記述標準の詳細な説明

CSS BEM 記述標準の詳細な説明

BEM は、Web 開発に対するコンポーネントベースのアプローチです。ユーザー インターフェイスを独立したブロックに分割し、複雑な UI インターフェイスをより簡単かつ迅速に開発し、コピー アンド ペーストせずに既存のコードを再利用できるようにするというアイデアです。 BEM は、ブロック、要素、および修飾子で構成されます。セレクターでは、関係を拡張するために次のコネクタが使用されます。

  • `__: 二重アンダースコアはブロックとそのサブ要素を接続するために使用されます
  • ` : ブロック、要素、または修飾子の複数の単語を接続するハイフンとしてのみ使用されます (キャメルケースで直接記述することもできます)
  • --: ブロックまたは要素の状態を接続するには、二重ハイフンを使用します (単一のアンダースコアも使用できます)

例:

ブロック名_修飾子名
ブロック名__要素名--修飾子名
ブロック名_修飾子名--修飾子値
ブロック名__要素名--修飾子名--修飾子値

基本概念

ブロック

コード スニペットは再利用でき、このコードは他のコンポーネントに依存しません。つまり、ブロックを使用できます。ブロックは任意の深さまで相互にネストできます。
特徴:

  • ブロックの名前はその目的を説明します。メニュー、ボタンなど
  • ブロックは環境に影響を与えることはできません。つまり、ブロックの余白や位置を設定することはできません。
  • クラス名セレクターのみ使用でき、タグセレクターや ID セレクターは使用できません。
  • ページ内の他のブロックや要素に依存しない

要素

要素はブロックの一部であり、独立して存在しません。任意の要素は意味的にブロックにバインドされます。

特徴:

  • ブロックに接続するには '__' を使用します。 例えば: block__item
  • 目的を説明するために使用されます。例: アイテム、テキスト
  • 要素は任意のレベルまで相互にネストできます。
  • 要素は常にブロックの一部です。したがって、block__item1__item2 のような命名は違法です。

修飾子

修飾子は、ブロックまたは要素上のタグです。これらを使用して、スタイル、動作、または状態を変更します。ブロックまたは要素のコネクタは '--' です。

応用

ブロックを他のブロックに対して相対的に配置

最善のアプローチは、ブロックと要素を組み合わせて使用​​することです。ブロック上で余白と位置を設定できない問題を解決します。

例:

<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 のインストールと、仮想マシンへのインストールで遭遇する落とし穴 (問題のまとめ)

>>:  JavaScript サンドボックスの探索

推薦する

MySQL 8.0.22 解凍版インストールチュートリアル(初心者向け)

目次1. リソースのダウンロード2. ソフトウェアを解凍する2.1 場所を選択する2.2 名前を変更...

表には表示したい境界コードが表示されます

テーブルの共通プロパティ基本的な属性は、width (幅)、height (高さ)、border (...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

興味深いカウントダウン効果を実現するjs

js興味深いカウントダウンケース、参考までに、具体的な内容は次のとおりですコード: <!DO...

DockerはRedisを起動し、パスワードを設定します

RedisはRedisバージョン5のapline(Alps)イメージを使用します。これは小さくて高速...

image/x-png の ContentType について

これにより、png ファイルのアップロードも不可能になりました (後で情報を調べたところ、レジストリ...

クラウド サーバーを使用して CentOS システムに .NET 6.0 をインストールする

.NET SDK ダウンロード リンクhttps://dotnet.microsoft.com/do...

MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...

MySQL 8.0.12 のインストールと設定のグラフィックチュートリアル

MySQL 8.0.12 のダウンロードとインストールのチュートリアルを録画し、全員と共有しました。...

Linux ディスクのシーケンシャル書き込みとランダム書き込みの方法

1. はじめに● ランダム書き込みではヘッドがトラックを頻繁に変更するため、効率が大幅に低下します。...

Dockerイントラネット侵入FRP展開の実装プロセスの分析

1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...

Jenkins Docker 静的エージェント ノードのビルド プロセス

静的ノードはマシン上に固定されており、いくつかの固定コマンドを通じて起動されます。動的ノードには複数...

nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明

前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...

Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを...

nginx+lua を使用した単一マシンでの何万もの同時接続の実装

nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...