# 共通ルール　〜BEM記法編〜
クラス名悩むよね。私もそう。
ここではチームCの命名規則を統一するためのTIPSをまとめます。

## 基本的なルール　(72cチームでのルール)

---

* ### Block、Element、Modifierの意味は各自調べましょう。↓参考URL
> https://app.codegrid.net/entry/bem-basic-1#toc-3
>

---

* ### BlockとBlock / BlockとElementを繋ぐ際はアンダーバー２つで繋ぐ　（使用頻度：高）

.block__block
.block__element
.block__block__element

---

* ### Modifierはハイフン２つで繋ぎ、修飾を表す（使用頻度：少）

%h2.content__title--big  　　　　# 大きいタイトル
%p.content__text--alert   　　　　 # 赤いテキスト(警告)
%span.content__text--emphasis  # 強調

文字の強調部分や、ここだけ大きく！、ここだけ赤く！ってときに使います。
なのであまり登場しないかも。

---

* ### 単語の区切りはハイフンを一つ表現してOK（使用頻度：少〜中）

.top-banner 　# 上に配置するバナー。
.corporate-logo　　# 企業ロゴ

多用は避けましょう。原則、一つの単語にするように努力しましょう。
どうしても「このブロックは２単語じゃないと表せない…」というときのみ使用。

---

* ### SCSSを見ればHTMLの入れ子の構造がわかるようにするために…
コンポーネント(機能)の親要素から先の子要素たちはアンダースコア__で繋いでいく

## Haml ##
.main
  .contents
    .contents__content
      %h2.contents__content__title
        タイトル
      %p.contents__content__text
        ネストが深いほどclass名が長くなるのは仕方ない

## SCSS ##
.main {
  .contents {
    &__content{    
      &__title {
      }
      &__text {
      }
    }
  }
}

このルールはTrelloに記載されている課題を満たすためのルールです。

→ 「main__contents...じゃないの？」と思うかもしれませんが、そこは話会いましょう。（一応理由はあります）

---

---

---

## 例　：私がヘッダー作ったときの思考手順
### 実際のコードを眺めてどんな感じなのかを見てみよう
↓ヘッダー。これを目指す↓

↓ブロックを細分化するときには、まず大枠をイメージすると取り掛かりやすい
1. "ヘッダー"コンポーネントで一番でかい枠は
**→"header"**
1. 両サイドにpaddingを設けたいから"inner"を作る
**→"header__inner"**
1. "top"[ロゴと検索フォーム]、"nav"[ナビゲーションバー]がある
**→"header__inner__top" / "header__inner__nav"(.nav)**
1. "top"には[ロゴ]、[検索フォーム]がある
**→"header__inner__top__logo" / "header__inner__top__search"**
1. [検索フォーム]にはフォームタグがある
**→"header__inner__top__search__form"**
1. [フォーム]にはinputとbuttonがある
**→"header__inner__top__search__form__input"**
**→"header__inner__top__search__form__button"**
1. [ナビゲーションバー]部分も同じようにブロックを細分化

↓ 以下、実際のコード↓ 　※画像はHTMLですが、実際のコーディングはHamlです

↓ SCSS (入れ子の関係がわかるので、構造が把握しやすい)

## 余談
blockをひたすら__で連結させていくのは本当のBEMではないそうです。
ただし、今回課題として「SCSSを見ただけでHTMLの構造をわかるようにする」という指定があるので、この条件をクリアするためにガンガン要素を__で繋げています。