クラスを見るとき、どのような情報を得たいですか?
この時点で、上記の問題をすべて一目で解決するためにこのクラスを確認する必要があり、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 動的ルーティング実装例
最近、ウェブサイトを https アクセスに変換したいのですが、すべて完了した後、Baidu Web...
著者は最近、仕事でパフォーマンスのボトルネックの問題に遭遇しました。MySQL テーブルには毎日約 ...
最近、省、市、地区のカスケード選択効果を実装する必要があります。省、市、地区のデータはすべてローカル...
この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...
目次JavaScript のインポート1. 内部ラベル2. 外部紹介基本的な構文データ型番号弦ブール...
目次序文1. 例で理解する2. ソースコードを分析する3. まとめ要約する序文他の人のコンポーネント...
背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...
序文仕事では、毎週従業員が提出した資料を数える必要がありますが、それを一つずつコピーして貼り付けるの...
この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...
目次ログはどこに保存されますか?コンテナ内のアプリケーションからのログを表示するDockerデーモン...
この学習ノートの最初の記事として、シリーズの他の記事と同様に、Bootstrap の紹介から始め、そ...
目次序文方法1: 高コントラスト方法2: getBoundingClientRect() APIを使...
これは本質的に、ビュー インターフェース構造を記述するために使用される共通の js オブジェクトです...
1.移行遷移プロパティの使用法: transition :transition-property t...
目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...