FLOCSSとは
FLOCSS（フロックス） は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。
命名規則
プレフィックス
layoutならl-、Componentならc-のように、属してるフォルダ名の**{頭文字}+-**でプレフィックスを頭につけ、ファイル名だけでもで判断しやすくする（Foundationはリセットや下地が目的なので除く）
MindBEMding
BEMシステムのシンタックスである、Block、Element、Modifierに分類して構成される規則。
BEM記法におけるElement/Modifierの付け方メモ
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名の命名ルールに則って記述するだけの単純な方法です。
Block
一般的な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を同時に使用することができます。
この場合のclass名は「Block_key_value」で表します。
次のようなコードの場合、listというclass名のBlockに、typeのバリエーションがあり、それはdiscとcheckという2種類だ、ということがわかります。
<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>
<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つ繋げたものを使用します。
<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つを使用します。
<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つ以上の単語で表す場合は「単語-単語」のように、区切り文字にハイフンを使用します。
<div class="search-result">
<div class="search-result__item">...</div>
</div>
BEM記法におけるElement/Modifierの付け方メモ