クラスを見るとき、どのような情報を得たいですか?
この時点で、上記の問題をすべて一目で解決するためにこのクラスを確認する必要があり、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> </フォーム> 修飾子と要素名にブロック名を追加する利点
BEM はいつ使用すればよいですか?
。隠れる { 表示: なし !重要; } 命名規則 二重下線スタイル
キャメルケーススタイル
React 命名パラダイム
名前空間スタイルなし
一般的な 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 動的ルーティング実装例
文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...
MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...
目次ルーティングプラグインをモジュール方式で使用するルートの使用宣言型ナビゲーションプログラムによる...
スロットとは何ですか? Vue では、子コンポーネント タグの中央に何もラップできないことはわかって...
1. IE8 の getElementById は id のみをサポートし、name はサポートしま...
1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...
背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...
1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...
Docker-machineはDockerが公式に提供しているDocker管理ツールです。これは d...
目次使用シナリオ解決1. globalDataを使用して実装する2. ローカルキャッシュストレージを...
目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...
目次1. 前処理2. コンパイル3. コンパイル4. リンク1. gccのインストール(Ubuntu...
1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...
Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...
* 住所 - 住所* blockquote - ブロック引用* center - 中央揃えブロック*...