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.25 解凍版のインストールと設定方法のグラフィックチュートリアル

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

MySQL 8.0.25 解凍版のインストールと設定方法のグラフィックチュートリアル

Linux サーバー上で複数の SVN リポジトリを構成するプロセスの詳細な説明

サーバーのDockerコンテナへのvscodeリモート接続を設定する方法

MySQLで更新可能なビューを作成する方法の詳細な説明

MYSQLが中国語を認識できない問題の恒久的な解決策

CSSは2つの要素をブレンドする効果（スティッキー効果）を実現します。

MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)

docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

W3C チュートリアル (12): W3C SOAP アクティビティ

JQueryはアニメーション効果の非表示と表示を実装します

推薦する

HTML ヘッド構造

MySQL 5.7.18 MSI インストールグラフィックチュートリアル

Vue要素と多言語切り替えの詳細な説明

Linux mysql5.5 を mysql5.7 にアップグレードする手順と落とし穴

Docker に MySQL と MariaDB をインストールする方法

Dockerコンテナのデータボリュームの詳細な説明

CentOS7 64でのMySQL5.6.40の詳細なインストール手順

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

ウェブページのフォント設定についての簡単な説明

初心者向けMySQLインデックス

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

Docker クロスホストネットワーク (オーバーレイ) の実装

Linux環境でよく使われるMySQLコマンドの紹介

CentOS7にPostgreSQL11をインストールする方法

Linux 上の MYSQL 5.7 でルートパスワードを取得する際の問題 (テスト済み、利用可能)