CSS設計FLOCSS + BEM まとめ


## FLOCSSとは

**FLOCSS（フロックス）** は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。

[FLOCSS生みの親による基本ルール](https://github.com/hiloki/flocss)


##命名規則

###プレフィックス
`layout`なら`l-`、`Component`なら`c-`のように、属してるフォルダ名の**{頭文字}+-**でプレフィックスを頭につけ、ファイル名だけでもで判断しやすくする（Foundationはリセットや下地が目的なので除く）

### MindBEMding

BEMシステムのシンタックスである、Block、Element、Modifierに分類して構成される規則。

[BEM記法におけるElement/Modifierの付け方メモ](https://qiita.com/usagi-f/items/b4e56e765384c49d5d04)

###JavaScriptで操作され、状態を変化させるためのクラス

**プレフィックスに`is-`をつけ、定義する**
この場合、他のObjectへの変化にスタイルを当ててしまうことを防ぐために、`is-click`自体にスタイルは定義しないこと。
必ず、`.c-button.is-click`にスタイルを定義する。

##構造

**`Foundation`** サイト全体のデフォルトスタイルを管理。
├ reset.scss 
├ base.scss
├ variable.scss　サイト全体で使える変数
├ mixin　サイト全体で使えるmixnを管理
**`Layout`**　各ページを構成するサイト全体で共通したエリアを管理。
├ l-header.scss
├ l-main.scss
├ l-footer.scss
**`Object`**　サイト全体で再利用できるパターンを持つモジュールを管理
├ **`Component`**　**再利用可能な**小さな単位のモジュールを管理（ボタンなど）
　├ c-button.scss
　├ c-grid.scss
　├ …
├ **`Project`**　再利用予定のないプロジェクト固有のスタイルを管理
　├ p-card.scss 
　├ p-profile.scss
　├ ...
├ **`Utility`** ComponentとProjectのモディファイア（パターン）で解決することができないスタイル、また、調整のための便利クラスなどを管理。
　├ u-utility.scss
　├ u-color.scss
　├ u-margin.scss
　├ u-padding.scss
├ **`Theme`** テーマによる色の切り替えなど、ページ単位の色違いとか
　├ t-blue.scss
　├ ...


## BEMまとめ

BEMは、**Block**、**Element**、**Modifier**という3つの概念だけ理解してしまえば、あとはclass名の命名ルールに則って記述するだけの単純な方法です。

[BEMによるフロントエンドの設計](https://app.codegrid.net/entry/bem-basic-1)

### Block

![スクリーンショット 2019-12-12 14.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/182e2589-b588-60df-b2a2-57f496b26d5a.png)

一般的なWebページの場合、Blockは何度も繰り返し出現することが想定できます。そのためBlockを識別するためには`id属性`を使わず`class属性`を利用します。

Blockはどこにでも置くことができ、Blockの中にBlockを含めることも可能です。ただし、CSSではBlockを入れ子にしてスタイルを指定してはいけません。

### Element

ElementはBlockの構成要素で、そのElementが属するBlock内でのみ意味を成します。

### Modifier

既存のBlockやElementと似ているけれど、見た目や動きが少しだけ違うものを作りたい場合には、新規にそれらを作るのではなく、Modifierを使うことができます。

例えば、同じリストで、行頭記号が2種類以上存在する場合や、同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、見栄えを変える場合などです。

Modifierは、BlockやElementのバリエーションの軸（例：行頭記号）や、状態（例：現在地）を表すプロパティの役割をします。

Modifierは名前（key）と値（value）を持ち、複数のModifierを同時に使用することができます。

![スクリーンショット 2019-12-12 15.14.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/93019a95-01ad-65b9-45d1-59831eb8f706.png)

この場合のclass名は「Block_key_value」で表します。

次のようなコードの場合、listというclass名のBlockに、typeのバリエーションがあり、それはdiscとcheckという2種類だ、ということがわかります。

```index.html
<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
 
<ul class="list  list_type_check">
  <li class="list__item"></li>
  <li class="list__item"></li>
  ...
</ul>
```

![スクリーンショット 2019-12-12 15.24.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/446210/796a0c4c-d367-e4e8-0dff-1833954efc51.png)


```index.html
<ul class="menu">
  <li class="menu__item"></li>
  <li class="menu__item  menu__item_state_current"></li>
  <li class="menu__item"></li>
</ul>
```

#####BlockとElementの区切り
「Block__Element」と、区切り文字にアンダースコアを2つ繋げたものを使用します。

```index.html
<ul class="menu">
  <li class="menu__item"></li>
  <li class="menu__item"></li>
</ul>
```
#####Modifierの区切りと、Modifierのkeyとvalueの区切り
「Block_key_value」または「Element_key_value」のように、区切り文字にアンダースコア1つを使用します。

```index.html
<ul class="list  list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

<ul class="menu">
  <li class="menu__item"></li>
  <li class="menu__item  menu__item_state_current"></li>
  <li class="menu__item"></li>
</ul>

```
#####単語の区切り
BlockやElement名を、2つ以上の単語で表す場合は「単語-単語」のように、区切り文字にハイフンを使用します。

```index.html
<div class="search-result">
  <div class="search-result__item">...</div>
</div>
```

[BEM記法におけるElement/Modifierの付け方メモ](https://qiita.com/usagi-f/items/b4e56e765384c49d5d04)
###参考