【CSS】BEMについて

## はじめに
* [ユニバーサル・スタジオ・ジャパン](https://www.usj.co.jp/web/ja/jp)のHPを例に取り上げてます。

## 特徴
* 厳格な命名規則をもつ設計手法
* 認知度が高い

## メリット
* 拡張性
* 独立性
* 可読性
* 詳細度が均一

## デメリット
* クラス名が長い
* 命名規則の共通理解

## 利用シーン
* 大規模開発

## 原則
1. Block（かたまり）
1. Element（要素）
1. Modifier（修飾）

の3つに分類して、それぞれ命名規則を考える。
BEMはそれぞれの頭文字。

### Block・Element・Modifierってなんやねん
1. Block（かたまり）：特定の場所に依存しない、どこでも使い回せるパーツ
1. Element（要素）：Blockを構成し、Block外では使用できない要素
1. Modifier（修飾）：BlockやElementの見た目や状態、振る舞いを定義

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/c697f2d1-da37-c9dd-526a-676c3e096799.png" width="100%">


## 1. BEM全体の規則

### メリット
* HTMLとスタイリングを依存させない
* CSSの詳細度を均一に保つ

### 規則
* CSSに記述する際は、クラスセレクターを使用する
* クラス名は半角英数字の小文字
* 複数の単語は”-”でつなぐ
```css:CSS
.class{...}
.class-name{...}
```

## 2. Blockの規則
### メリット
* クラス名から機能が想像できる

### 規則
#### 命名規則
* block名は、それが何なのかを表す
```css:CSS
.block{...}
.block-name{...}
```

#### Blockのネストは可能
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/ed20dbbf-757c-3941-dc22-20af9bcb44ec.png" width="100%">

#### レイアウトに関するスタイリングは適応させない
レイアウトに関するスタイリングとは、position、float、marginなど
<!-- どうしても指定したい場合は、「[Mix](#5-mix)」という考え方を適応させる。 -->
どうしても指定したい場合は、「Mix」という考え方を適応させる。
（後日、別に記載する）

```html:HTML
<form class="form">
　<form class="log-in">
  <form class="auth">
  <form class="resetting">
</form >
```
このとき、
認証ブロックをフォームブロックの中央に配置したい場合、
レイアウトに絡む変更が伴う

## 3. Elementの規則
### メリット
* クラス名から役割が想像できる
* クラス名から影響範囲が想像できる
* 特定の場所に依存させない
* CSSの詳細度を均一に保つ

### 規則
#### 命名規則
* element名は、「それが何なのか」を表す
* Blockから名前を継承し、”__”で記述
※アンダースコア2つ。間はスペースなし
```css:CSS
.block__element{...}
.block-name__element-name{...}
```

* Elementの中にElementを入れない
* Blockの中に複数のElementは可
* Elementは必ずBlock内に配置

```css:CSS
× .block__element__element{...}
○ .block__element1{...}
○ .block__element2{...}
```

例）
a要素のクラス名はli要素のクラス名を含まない
```html:HTML
<ul class="ul">
  <li class="ul__li">
    <a class="ul__a"></a>
  </li>
</ul>
```
```css:CSS
.ul{...}
.ul__li{...}
.ul__a{...}
```
a要素がulブロック内のどこに移動しようがスタイルは変わらない。


## 4. Modifierの規則
### メリット
* クラス名から見た目が想像できる
* 拡張しやすい


### 規則
#### 命名規則
* BlockかElementがある状態でModifierを付ける
* BlockかElementの名前を継承し、”_”で記述
※アンダースコア1つ。
```css:CSS
.block_modifier{...}
.block-name_modifier-name{...}
.element_modifier{...}
.element-name_modifier-name{...}
```
* Modifier名は、「何が、どうであるか」を表す
    * 「何が_どうであるか」
    ※アンダースコアで区切る
    * 「どうであるか」
    ※アンダースコアなし

の2パターンある
```css:CSS
.block_color_red{...} 　/* 色が赤色 */
.block_enable　　　　　　/* 有効 　　*/
.element_color_red{...} /* 色が赤色 */
.element_enable　　　　　/* 有効 　　*/
```
<!--
## 5. Mix
### 「Mix」とは
* ひとつのHTML要素に、役割の異なる複数のクラスがついている状態

### メリット
* コードを複製することなく、スタイルを組み合わせる
* 既存のBEMの実体から、新たなパーツを生成

### 利用シーン
* レイアウトに絡む変更の場合に適応

### コード
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/ed20dbbf-757c-3941-dc22-20af9bcb44ec.png" width="
50%">
```html:BEM
<form class="form">
　<form class="log-in">
  <form class="auth">
  <form class="resetting">
</form >
```
```html:Mix
<form class="form">
  <form class="log-in form__log-in">
  <form class="auth form__auth">
  <form class="resetting form__resetting">
</form >
```
```css:CSS
.form__log-in{...}
.form__auth{...}
.form__resetting{...}
```
上記のように、
特定のエリアでしか使用されていないブロックでスタイリングさせることにより、他で使用されているログインなどには影響が出ない。
よって、
* 再利用性が高い
* 独立性が保たれる

-->

## 所感
* クラス名が長くなる問題に対しては、キャメルケースを使用する

## 参考文献

https://www.amazon.co.jp/CSS%E8%A8%AD%E8%A8%88%E5%AE%8C%E5%85%A8%E3%82%AC%E3%82%A4%E3%83%89-%E8%A9%B3%E7%B4%B0%E8%A7%A3%E8%AA%AC-%E5%AE%9F%E8%B7%B5%E7%9A%84%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E9%9B%86-%E5%8D%8A%E7%94%B0-%E6%83%87%E5%BF%97/dp/429711173X/ref=tmm_pap_swatch_0?_encoding=UTF8&qid=&sr=

https://www.amazon.co.jp/Web%E5%88%B6%E4%BD%9C%E8%80%85%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AECSS%E8%A8%AD%E8%A8%88%E3%81%AE%E6%95%99%E7%A7%91%E6%9B%B8-%E3%83%A2%E3%83%80%E3%83%B3Web%E9%96%8B%E7%99%BA%E3%81%AB%E6%AC%A0%E3%81%8B%E3%81%9B%E3%81%AA%E3%81%84%E3%80%8C%E4%BF%AE%E6%AD%A3%E3%81%97%E3%82%84%E3%81%99%E3%81%84CSS%E3%80%8D%E3%81%AE%E8%A8%AD%E8%A8%88%E6%89%8B%E6%B3%95-%E8%B0%B7-%E6%8B%93%E6%A8%B9/dp/4844336355/ref=pd_vtp_sccl_3_4/355-0792597-6083124?pd_rd_w=kNOMN&content-id=amzn1.sym.cbb45385-7b99-44b7-a528-bff5ddaa153d&pf_rd_p=cbb45385-7b99-44b7-a528-bff5ddaa153d&pf_rd_r=41823D38PG1Z0DP15CW5&pd_rd_wg=b8vsx&pd_rd_r=614f4aa3-9753-4b1c-a1d5-612dc96d4b81&pd_rd_i=4844336355&psc=1