BEM

note

このページの日本語版はGoogle翻訳による機械翻訳です。

1.BEM とは何ですか？

BEM は特定の命名規則です。

2. BEM を使用する理由?

例： .imageと .text はよく使用するクラスです。
.image や .text などの一般的なクラスを使用する場合。
あなたが作成したパーツは、以前に他の人 (他のパーツ) が作成したスタイルから派生している可能性が非常に高くなります。
BEM は、影響を受けたり複製されたりしない CSS の手法です。これはプロジェクト開発に適しています。
グループで一貫して作業することで、クラス名を考える時間を短縮します。

3. BEMの使い方は？

上記は 概要の例です。
2 つのブロック 1、2 は類似しており、継承されていることがわかります。そのため、これをコンポーネントと見なします (クラス名は接頭辞 c- で始まる必要があります)。

ブロック1,2(コンポーネント)に付けられたクラス名は「c-imgtxt」です
コンポーネント c-imgtxt には 2 つのサブブロックがあり、それらのクラス名は構造に従ってクラス名 c-imgtxt を継承する必要があります: c-imgtxt__*** 例: c-imgtxt__image、 c-imgtxt__text
ブロック 2 はテキストの色がブロック 1 と異なるだけです。ブロック 2 のテキストの色の形式を編集するには、古い CSS を上書きする新しいクラスを使用します。この新しいクラスを c-imgtxt__text クラスと同等にします。 CSSを変更する必要がある場所。
この新しいクラスの形式がクラス c-imgtxt__text の形式をオーバーライドすることを理解できます。このクラスに新しい名前を付けるには、構造に従ってクラス名 c-imgtxt__text
を継承する必要があります: c-imgtxt__text--*** => c-imgtxt__text--red

BEM ルールに従って設定されるクラスは、次の 3 種類で構成されます。

ブロック (それ自体で意味のあるスタンドアロンエンティティをカプセル化します) 例: 概要の例の c-imgtxt。
要素 (クラスタイプが Block である要素の子) 例: 概要の例では c-imgtxt__img、c-imgtxt__text。
修飾子 (ブロックまたは要素のフラグ。外観、動作、または状態を変更するために使用します。) 例: 概要の例では c-imgtxt__text--red。

3.1. Block

図では、独自の意味を持つブロックがあります。枠線で囲まれ、左側が img、右側が text です。
=> それがブロックであるとみなして、そのクラス名を設定します。ブロック例: .c-sample (flocss の接頭辞「c-」)。

ルール名タイプブロック	HTML	CSS
ブロック名は、ラテン文字、数字、ダッシュで構成されます。 CSS クラスを形成するには、名前空間用の短いプレフィックスを追加します。 `.block`、`.c-block`	クラス名を受け入れる場合、任意の DOM ノードをブロックにすることができます。 `<div class="block">...</div>`	- クラス名セレクターのみを使用します - タグ名や ID は使用しません - ページ上の他のブロック/要素に依存しません `.block { color: #042; }`

3.2. 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; }`

3.3 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 { }`

3.4. Common mistake

<!--Ex: -->
<div class="c-sample">
  <div class="c-sample__img">
    <img class="c-sample__img__img1" alt="img" src="/">
  </div>
  <div class="c-sample__text">
    <p class="c-sample__text__text1">title title title</p>
  </div>
</div>

すべてのタグにクラスをアタッチします。
このコーディングは引き続き利用できますが、サイトの保守と修復の観点から、必要なタグにクラスのみをアタッチする必要があります。

<!--間違った命名例-->
<div class="c-list">
  <div class="c-list__card">
    <div class="c-list__card__info"> <!--間違い-->
      <div class="c-list__card__info__img"> <!--間違い-->
        <img alt="img" src="/">
      </div>
      <div class="c-list__card__info__text"> <!--間違い-->
        title title title
      </div>
    </div>
  </div>
</div>

<!--適切な命名例-->
<div class="c-list">
  <div class="c-list__card">
    <div class="c-list__info">
      <div class="c-list__img">
        <img alt="img" src="/">
      </div>
      <div class="c-list__text">
        title title title
      </div>
    </div>
  </div>
</div>

間違い

すべてのサブクラスにメインクラスに従って名前を付けます。
クラス名が長すぎるのは避け、上記のようにクラス名を付けます。

1.BEM とは何ですか？​

2. BEM を使用する理由?​

3. BEMの使い方は？​

3.1. Block​

3.2. Element​

3.3 Modifier​

3.4. Common mistake​