BEM
このページの日本語版はGoogle翻訳による機械翻訳です。
BEMとは何ですか？
BEM は、Block、Element、Modifier の略称です。 BEM は Yandex によって作成されます。
FLOCSS と同様に、BEM は CSS のクラス命名規則標準であり、FLOCSS と組み合わせることでクラス命名規則をより豊富かつ厳密にすることができます。
The naming techniques mentioned in this article are not the original BEM techniques but an improved version by Nicolas Gallagher, called MindBEMding. Although the used actual notation is different, they are essentially based on the BEM principle.
BEMを使用する理由?
- BEM は、チーム メンバーが より簡単かつ一貫して共同作業できるようにしま す。
- BEM は、よりシンプルで理解しやすく、編集しやすい堅固な構造を CSS に提供します。
- BEM は CSS コードが相互に影響を受けたり重複したりする可能性が低くなります。
- BEM は、クラス名を考えるのに費やす時間を削減するのに役立つソリューションです。
BEM の使用方法
BEM ルールに従って設定されるクラスは、次の 3 種類で構成されます。
Block__Element--Modifier
- Block: ウェブサイトのコンポーネントであり、独自の意味を持つ独立したエンティティです。
- Element: クラス タイプが Block である要素の子。
- Modifier: ブロックまたは要素のフラグ。外観、動作、または状態を変更するために使用します。
以下は 一般的な例 です。
同一のブロックが 2 つあることがわかります。したがって、これをコンポーネントとみなします (クラス名は接頭辞 c- で始まる必要があります)。
- ブロックのクラス名は
c-imgtxtです - ブロック
c-imgtxtには 2 つの子要素があり、それらのクラス名は構造に従ってc-imgtxtから継承する必要があります:c-imgtxt__***(例:c-imgtxt__imageおよび) c-imgtxt__text - ブロック 2 は、テキストの色がブロック 1 と異なるだけです。ブロック 2 のテキストの色の形式を編集するには、変更が必要な
c-imgtxt__textクラスと同等の新しいクラスを追加します。 この新しいクラスの形式は古いc-imgtxt__textクラスの形式を上書きすることがわかります。この新しいクラス名は次の構造に従ってクラス名c-imgtxt__textを継承する必要があります:c-imgtxt__text--* **、例:c-imgtxt__text--red
Block
図では、独自の意味を持つブロックがあります。枠線で囲まれ、左側が img、右側が text です。
=> それがブロックであるとみなして、そのクラス名を設定します。ブロック例: .c-sample (FLOCSS の接頭辞「c-」)。
| ルール名タイプ ブロック | HTML | CSS |
|---|---|---|
ブロック名は、ラテン文字、数字、ダッシュで構成されます。 CSS クラスを形成するには、名前空間用の短いプレフィックスを追加します。.block、.c-block | クラス名を受け入れる場合、任意の DOM ノードをブロックにすることができます。<div class="block">...</div> | - クラス名セレクターのみを使用します - タグ名や ID は使用しません - ページ上の他のブロック/要素に依存しません .block { color: #042; } |
Element
c-sample ブロックには、img と text という 2 つの子コンポーネントがあるため、それらのクラス名は構造 c-sample__*** に従って c-sample クラス名を継承する必要があります。例: c-sample__img、c-sample__text
| ルール名タイプ ブロック | HTML | CSS |
|---|---|---|
要素名は、ラテン文字、数字、ダッシュ、アンダースコアで構成されます CSS クラスは、ブロック名、2 つのアンダースコア、要素名として形成されます。.block__elem | ブロック内の任意の DOM ノードを要素にすることができます。 特定のブロック内では、すべての要素は意味的に同じです。<div class="block">...<span class="block__elem"></span></div> | - クラス名セレクターのみを使用します - タグ名や ID は使用しません - ページ上の他のブロック/要素に依存しません 良い .block__elem {color: #042;}悪い .block .block__elem {color: #042;}悪い div.block__elem {色: #042; } |
Modifier
タイトル DummyDummy では、左枠の色が少しだけ異なります。
そこでオリジナルc-title1の兄弟クラスを作成して左枠の色を変更します。
兄弟クラスは、構造 c-title1--*** に従って作成されます (例: c-title1-- yellow、 c-title1--red)。
これらの新しいクラスのスタイルは古いスタイルを上書きします。
| ルール名タイプ ブロック | HTML | CSS |
|---|---|---|
| 修飾子名は、ラテン文字、数字、ダッシュ、アンダースコアで構成されます。 CSS クラスは、ブロックまたは要素の名前に 2 つのダッシュを加えたものとして形成されます: .block--mod,block__elem--mod。複雑な修飾子のスペースはダッシュに置き換えられます: .block--color-black, .block__elem--color-red | Modifier は、ブロック/要素 DOM ノードに追加する追加のクラス名です。 モディファイア クラスを変更するブロック/要素 にのみ追加し、元のクラスを保持します。 良い <div class="block block--mod">…</div><div class="block block--size-big block--shadow-yes">... </div>悪い <div class="block--mod">…</div> | モディファイア クラス名をセレクターとして使用します:.block--hidden { }ブロックレベルのモディファイアに基づいて要素を変更するには: .block--mod .block__elem { }要素修飾子: .block__elem--mod { } |
BEM を使用する際に避けるべき間違い
・BEMを書くと、要素部分の後に「孫、曾孫、曾曾曾孫曾孫」という追加要素が存在する状況が発生します...通常どおり要素を記述するだけ (block__child2) であり、一連のアンダースコア (block__element__child1__child2) を記述しないでください。これにより、クラス名が長くなりすぎます。
- 修飾子を正しく記述するには、その前に要素またはブロックが必要です。
- 大きすぎて子カードが多数あるブロックで BEM を使用することはお勧めできません。 なぜなら、BEM は小規模、中規模、再利用可能なモジュラー ブロックを作成することだからです。 このようなケースに遭遇した場合は、より小さなブロックに分割する必要があります 。
- ウェブサイトのメンテナンス、修復、時間の節約を目的として、スタイルのないすべてのタグにクラスを設定することはお勧めできません。