CSS設計の「BEM」を1から理解する【使えそうな単語も一緒に】

CSSの学習をしていると**BEM**という単語を耳にする機会があると思います。
自分で調べてみたけど、いまいちピンと来なかったのでまとめてみました。

最後に簡単にまとめた使えそうな単語を表にしたので、class名で困ってる方に参考になれば幸いです。


# 1.BEMって？  
**B**lock(かたまり)  -ブロック
**E**lement(要素)  -エレメント
**M**odifier(修飾)  -モディファイ 

:::note
3つの単語の頭文字をとって「BEM」って呼ばれてます。
CSSで厳格なclass名の命名ルールが特徴的な設計方法の一つのこと。
:::


# 2.なんでBEM使うの？<br>
私自身なりましたが、コーディングの学習をしていて、サイトの模写とかオリジナルサイトを作るときにclass名って悩みませんか？  
例えば...  

```html:html
<div id="image" class="image"></div>
<h1 id="tittle" class="main-tittle"></h1>
<p class="content1"></p>
<p class="content2"></p>
```

上に書いたclass名とid名は自分が実際につけたものです。
これだとパッと見てどこの何の部分か分からないですね...  
ペライチだったり、コンテンツの少ないhtmlだったら頑張れるけど、もしこのclass名がついてるものを改修しろって言われたら「これどこの何！？」ってなると思います。  
そこで**BEM**を使えば

- コードを見ただけでスタイルの予測がしやすくなる
- 長期的なメンテナンス性が高くなる
- プログラマーの開発スピードも上がる

みたいなことが可能になります！！


# 3.わかったけど実際どう書くの？

```html:html_Block&Element
<div class="profile">   <!-- Block -->
   <div class="profile__image"><img src="">   <!-- Element -->
   </div>
</div>

<div class="header">   <!-- Block -->
   <div class="header__logo"></div>   <!-- Element -->
   <div class="header__nav"></div>   <!-- Element -->
</div>
```

どうですか？
なんか見ただけでどこの場所が想像できませんか？

```html:html_Block(Element)とModifierの区切り
<div class="content content--blue">   <!-- Modifier -->
   <img class="content__img" src="">
   <div class="content__text">テキスト</div>
</div>
```

class名が長くなっちゃうけど、Sass(SCSS)を使えばそこまで苦労はしません。

:::note
BEMは、*コンポーネント化 する為のフロントエンド設計方法の一つでもある。  

*Webサイトで機能を持つ各パーツ(部品)の要素をまとめて成り立っていることをコンポーネント化と言います。
:::

Block(かたまり)を構成するのがElement(要素)。
Modifier(修飾)は、Block(かたまり)とElement(要素)のスタイルや状態を修飾していきます。

**BlockとElementはアンダースコア2つ(__)で区切る。
ElementとModifierはハイフン2つ(--)で区切るのが基本の書き方です。**

書き方はわかったけど...

# 4.Blockってなんぞ？
Webページは、ヘッダー、フッダー、ナビゲーション、サイドバーなどのパーツで構成されています。
この各パーツにあたる部分 = Block
Blockは、コンポーネントって考えることも出来る。

:::note
Blockのルール
  ・ブロックは一つ一つが独立したパーツとして設計
  ・ブロックの中にブロックを作成してもOK
  ・ブロック名が重複することはない!
:::

# 5.じゃあElementってなんぞや？
簡単にいうと、**Blockを構成する要素**のこと。
ヘッダーの中に **タイトル** とか **ナビゲーション** があると仮定して、タイトルとナビゲーションはヘッダーを構成する要素(Element)になる。

:::note
Elementのルール
　・必ずブロックの中に存在する
　・エレメント名の重複はOK
:::

どこまでがBlockなのか一目で理解する事ができるから、必ずclass名にはBlock名をつける。

# 6.Modifierとは？
既存のBlockやElementに対して、一部の見た目や状態を変えたいとき、新しく作り直すが大変だから、Modifierを使用します。

BlockやElementが繰り返し使われているとか、２種類以上存在する場合はModirierを！  


Modifierには**Blockに対して使うModifier**と**Elementに対して使うModifier**の2種類あります。
また、Modifierは**名前であるkey**と**値であるvalue**を持ちます。

```:Modifierの使い方
<!-- Blockに対して修飾 -->
  Block--Modifier

<!-- Elementに対して修飾 -->
  Block__Element--Modifier

<!-- Modifierのkey,valueを指定する場合 -->
  Block--key_value
  Block__Element--key_value
```

Modifierでkeyとvalueを指定する場合は、keyとvalueをアンダースコア１つ(_)で区切ります。

:::note
Modifier
   ・パーツの構成は同じだが、見た目や動作が異なるものに設定
   （色違いのボタンや非活性のタブ、コンテンツの背景の一部変更etc.）
:::

# 7.英語苦手だから結局クラス名に困るよ？
ボキャブラリーが無いとやっぱりclass設計は辛いです。
なので、よく使う単語をまとめました。

### - Block -
| 単語の例                           | 使いどころ(意味) | 
| ---------------------------------- | ---------------- | 
| wrapper , wrap                     | 全体or特定の範囲 | 
| content , contents                 | コンテンツ       | 
| container , page                   | 全体(を囲む)     | 
| section                            | セクション       | 
| home                               | トップページ     | 
| group                              | グループ         | 
| catch                              | キャッチフレーズ | 
| hero                               | メイン画像       | 
| description(desc) ,summary         | 概要             | 
| introduction(intro)                | 前置き           | 
| information(info) , announce       | お知らせ         | 
| feature                            | 主要部分         | 

### - Element -
| 単語の例                           | 使いどころ(意味) | 
| ---------------------------------- | ---------------- | 
| head                               | ヘッダー         | 
| body                               | ボディ           | 
| foot                               | フッター         | 
| inner                              | 内側             | 
| outer                              | 外側             | 
| title                              | タイトル         | 
| heading                            | 見出し(表題)     | 
| lead                               | 案内             | 
| list , menu                        | 一覧             | 
| item                               | 項目             | 
| column(col)                        | 縦列             | 
| caption                            | 補足説明         | 
| avatar                             | 人物画像         | 
| feature                            | 特徴画像         | 
| next                               | 次               | 
| previous                           | 前               | 
| tel                                | 電話             | 
| address                            | 住所             | 
| date                               | 日付             | 
| time                               | 時間             | 
| cat , category                     | カテゴリー       | 
| tag                                | タグ(識別)       | 
| overlay                            | 上書き           | 
| mask                               | 覆い隠す         | 
| text                               | テキスト         | 
| delimiter                          | 範囲、境界線     | 
| separator                          | 範囲を分離       | 
| divider                            | 範囲をグループ化 | 


### - Modifier -
| 単語の例                           | 使いどころ(意味) | 
| ---------------------------------- | ---------------- | 
| alert , warning , danger , caution | 注意、警告       | 
| error                              | 間違い           | 
| success                            | 成功             | 
| small                              | 小さい           | 
| medium                             | 中間             | 
| large                              | 大きい           | 
| huge                               | めちゃ大きい     | 
| reverse                            | 反転             | 
| push                               | 押す             | 
| pull                               | 引く             | 
| center , middle                    | 真ん中           | 
| offset                             | 相殺             | 
| round                              | 角丸             | 
| circle                             | 円形             | 
| invisible , hidden , hide , none   | 非表示           | 

*left*や*right*は入れ替わったときに矛盾が発生するから、できるだけ使わない方が無難です。

# 8.おわりに
BEMって大規模改修だけに意味があると思ってたけど、はっきりルールを定めることによって、自分だけじゃなくチームにも良い影響が出るんだなってわかりました。
ルールが無いと自分以外の誰かが見たときに「これなんやねん！」とか「どこやねんここ！」って余計な手間を減らせれる効果があるんだと思います。

今回表にした他にもまだまだ使えそうな単語があるので、次は単語だけでまとめたいと思います。