CSSはBEM命名規則の実践を使用する

CSSはBEM命名規則の実践を使用する

クラスを見るとき、どのような情報を得たいですか?

  • このクラスはどこで使用され、その機能は何ですか?
  • このクラスは他の場所でも使用されていますか? 変更によって他の場所でスタイルの問題が発生しますか?
  • js でクラスが使用されていますか?
  • ......

この時点で、上記の問題をすべて一目で解決するためにこのクラスを確認する必要があり、BEM は価値があります。

BEMとは何か

BEM(Block、Element、Modifier)は、主に CSS を対象とした、コンポーネントベースの Web 開発におけるフロントエンドの命名方法です。その背後にある考え方は、ユーザー インターフェイスを独立したチャンクに分割することです。これにより、複雑な UI でもインターフェース開発が簡単かつ迅速になり、コピー アンド ペーストせずに既存のコードを再利用できます。

利点

  • スタイルの衝突を避ける
  • 名前の長さを短くする
  • 読みやすさを向上させる
  • スタイルの再利用を増やす

BEMの使い方

ブロック

機能的に独立しており、再利用できるページコンポーネント

ブロックは環境に影響を与えてはならない。つまり、ブロックの外部ジオメトリ(余白)や位置を設定すべきではない。

<!--
    良い
-->
< div クラス = "ヘッダー" > </ div >

<!--
    悪い
    赤い文字は外観を説明するものです -->
< div クラス = "red-text" > </ div >

要素

ブロックの複合部分であり、単独では使用できません

要素の完全な名前の構造は、ブロック名__要素名です。

<!-- ブロック `search-form` -->
<form class="検索フォーム">
    <!-- `search-form` ブロック内の `input button` 要素 -->
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

要素は常にブロックの一部であり、別の要素の一部ではないため、要素名はblock__elem1__elem2の階層として定義することはできません。

<!--
    良い
    `block-name__element-name` に従ってください
-->
<form class="検索フォーム">
    <div class="検索フォーム__コンテンツ">
        <input class="検索フォーム__input">
        <button class="search-form__button">検索</button>
    </div>
</フォーム>

<!--
    悪い
    'search-form__content__button' は `block-name__element-name` の後に続きません
-->
<form class="検索フォーム">
    <div class="検索フォーム__コンテンツ">
        <input class="検索フォーム__content__input">
        <button class="search-form__content__button">検索</button>
    </div>
</フォーム>

要素は常にブロックの一部であり、ブロックとは別に使用しないでください。

<form class="検索フォーム">
    <!-- 
        良い
        要素はブロック検索フォーム内にあります -->
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

<form class="検索フォーム"></form>
<!--
    悪い 
    要素はブロック検索フォーム内にありません -->
<input class="検索フォーム__input">
<button class="search-form__button">検索</button>

修飾子

ブロックまたは要素の外観、状態、または動作を定義するエンティティ

2種類の修飾語

ブール

修飾子のフルネームの構造は次のパターンに従います。

  • ブロック名_修飾子名
  • ブロック名--修飾子名
  • ブロック名_要素名_修飾子名
  • ブロック名_要素名--修飾子名
<form class="検索フォーム 検索フォーム_focused">
    <input class="検索フォーム__input">

    <!-- 'disabled' は 'button' の要素です -->
    <button class="search-form__button search-form__button_disabled">検索</button>
</フォーム>

キーバリュー

修飾子のフルネームの構造は次のパターンに従います。

  • ブロック名_修飾子名_修飾子値
  • ブロック名_修飾子名--修飾子値
  • ブロック名__要素名_修飾子名_修飾子値
  • ブロック名__要素名_修飾子名--修飾子の値
<form class="検索フォーム 検索フォーム_テーマ_islands">
    <input class="検索フォーム__input">

    <!-- 
        良い
        `button` の修飾子 `size` の値は `m` です 
    -->
    <button class="search-form__button search-form__button_size_m">検索</button>
</フォーム>

<form class="検索フォーム
             検索フォーム_テーマ_島
             検索フォームテーマlite">
    <input class="検索フォーム__input">

    <!-- 
        悪い
        同じ修飾子の2つの異なる値を同時に使用することはできません -->
    <button class="検索フォーム__button
                   検索フォーム__ボタンサイズ_s
                   検索フォーム__button_size_m">
   </ボタン>
</フォーム>

修飾子は、修飾するブロックまたは要素から切り離して使用することはできません。修飾子はエンティティの外観、動作、または状態を変更するものであり、置き換えるものではありません。

<!--
    良い
-->
<form class="検索フォーム 検索フォーム_テーマ_islands">
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

<!-- 
    悪い
    ブロック名「search-form」がありません 
-->
<form class="search-form_theme_islands">
    <input class="検索フォーム__input">
    <button class="search-form__button">検索</button>
</フォーム>

修飾子と要素名にブロック名を追加する利点

  • あるブロックの要素と修飾子が別のブロックの実装に与える影響を軽減するのに役立ちます
  • DOM ノード上のどのエンティティに修飾子が適用されているかが明確になります。
  • 一意の名前を付けると、コード内またはファイル システム上のエンティティを見つけやすくなります。

BEM はいつ使用すればよいですか?

  • BEM を使用するコツは、いつ何を BEM 形式で記述する必要があるかを知ることです。
  • すべてに BEM 命名法を使用する必要はありません。明示的なモジュール関係が必要な場合は、BEM 形式を使用する必要があります。
  • たとえば、公開スタイルシートが 1 つだけの場合は、BEM 形式を使用する意味はありません。
。隠れる {
    表示: なし !重要;
}

命名規則

二重下線スタイル
block-name__elem-name--mod-name--mod-val

  • 名前は小文字のラテン文字で書きます。
  • BEM エンティティ名内の単語はハイフン (-) で区切られます。
  • 要素名は二重のアンダースコア (__) でブロック名と区切られます。
  • ブール修飾子は、二重ハイフン (--) でブロックまたは要素の名前から区切られます。
  • 修飾子の値は、二重ハイフン (--) で名前と区切られます。
  • (重要: コメント内の二重ハイフン (--) は、HTML ドキュメントの検証中にエラーを引き起こす可能性があります。)

キャメルケーススタイル
blockName-elemName_modName_modVal

  • 名前はラテン文字で書かれています。
  • 名前の各単語は大文字で始まります。
  • ブロック、要素、修飾子名の区切り文字は標準スキームと同じです。

React 命名パラダイム
BlockName-ElemName_modName_modVal

  • 名前はラテン文字で書かれています。
  • ブロック名と要素名は大文字で始まります。修飾子名は小文字で始まります。
  • 名前の各単語は大文字で始まります。
  • 要素名は、単一のハイフン (-) でブロック名と区切られます。
  • 修飾子の名前と値の間の区切り文字は、標準スキームの場合と同じです。

名前空間スタイルなし
_available

  • 名前はラテン文字で書かれています。
  • 修飾子の前にブロックまたは要素の名前は付きません。この命名方式では、修飾子がどのブロックまたは要素に属しているかを判別できないため、ミックスの使用が制限されます。

一般的な CSS 命名

Vant コンポーネント CSS 命名

使用される命名スタイルは、二重アンダースコアです: ブロック名__要素名--修飾子名

<div class="van-doc">
    <div class="van-doc-header">
        <div class="van-doc-row">
            <div class="van-doc-header__top">
                <a class="van-doc-header__logo">検索</a>
                <ul class="van-doc-header__top-nav">
                    <li class="van-doc-header__top-nav-item">
                        <a class="van-doc-header__logo-link">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="van-doc-container van-doc-row van-doc-container--シミュレータ付き">
        ......
    </div>
</div>

weui コンポーネント CSS 命名

使用される命名スタイルはReactの命名スタイルです: ブロック名__要素名_修飾子名

<div class="ページボタンjs_show">
    <div class="page__hd">
        <h1 class="page__title">ボタン</h1>
        <p class="page__desc">ボタン</p>
    </div>
    <div class="page__bd">

        <div class="button-sp-area">
            <a class="weui-btn weui-btn_primary">ページのメイン操作</a>
            <a class="weui-btn weui-btn_loading">ページのメイン操作</a>
            <a class="weui-btn weui-btn_disabled>ページのメイン操作</a>
            <a class="weui-btn weui-btn_default">ページの二次操作</a>
            <a class="weui-btn weui-btn_warn">警告操作</a>
        </div>
        ....
        <div class="button-sp-area セル">

BEM仕様検証ツール

stylelint セレクター bem パターン

CSS で BEM 命名規則を使用する実践に関するこの記事はこれで終わりです。より関連性の高い CSS BEM 命名規則については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  vue-admin-template 動的ルーティング実装例

>>:  MySQL インデックス プッシュダウンの詳細

推薦する

JSは文字列内の指定された文字列のn番目の出現位置を取得します

文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...

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

MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...

Vueルーティングルーターの詳細な説明

目次ルーティングプラグインをモジュール方式で使用するルートの使用宣言型ナビゲーションプログラムによる...

Vue のスロットの使用法と適用シナリオの詳細な分析

スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...

私が遭遇したIE8の互換性に関する注意事項

1. IE8 の getElementById は id のみをサポートし、name はサポートしま...

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

MySQLのUPDATE文の落とし穴を記録する

背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

docker-machineの使い方の詳しい説明

Docker-machineはDockerが公式に提供しているDocker管理ツールです。これは d...

WeChatミニプログラムページで値を返す4つの解決策のまとめ

目次使用シナリオ解決1. globalDataを使用して実装する2. ローカルキャッシュストレージを...

Typescriptの基本構文13個を共有する

目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...

Linux システムでの gcc コマンドの使用法の詳細な説明

目次1. 前処理2. コンパイル3. コンパイル4. リンク1. gccのインストール(Ubuntu...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

Linux 環境変数の設定方法のまとめ (.bash_profile と .bashrc の違い)

Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...

XHTML ブロックレベルタグの概要

* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...