FLOCSSの基本について、整理してみる

毎回どうだったかな、と考えては探すところから始まってしまうので、これを機にまとめてみることにしました。

FLOCSSは、Foundation、Layout、Object
Component、Project、Utility　のレイヤーから構成される

Foundation

サイト全体のデフォルトのスタイルを定義する

• 広範囲にわたるベーススタイル：html、bodyなど

• 基本的なタイプセレクタ：h2、ulなど

装飾的なスタイルは避けて、できる限り低詳細度に保つ

Layout

サイトの各ページで共通するエリアを定義
ワイヤーフレームに書かれるような大きな単位のブロックが目安となる

• ヘッダーやフッター、ナビゲーションやサイドバーなど

レイアウトに関するスタイルをエリアごとに管理するイメージ

• 子要素はなるべくいれない

• 中身はProjectで定義する

例えば、ヘッダー内にあるロゴやグローバルナビゲーションはProject、これらの位置はこのレイヤーで定義する

Object

サイト全体を通して再利用可能なモジュールを定義
抽象度や詳細度、拡張性などによって、３つのレイヤーに分けられる

▽Component

最も小さなモジュール（機能）
多くのプロジェクトでも汎用的に使用できるものを定義

• 装飾的なスタイルを含めないようにする

• widthやmarginといった、レイアウトに影響を与えるプロパティも含めないようにする

• 汎用性のあるグリッドシステムもここで定義する

▽Project

いくつかのComponentと、他の要素によって構成される大きな単位のオブジェクト。プロジェクト固有の見た目を有するものを定義

• 構造的なパターンでも、装飾的に拡張されるのであればProjectレイヤーに置く（ボタンなど）

• Componentを集めて一つのオブジェクトにしたいとき　など

☆フレックスボックスのレイアウトもコンポーネントにしておくと便利
☆同じパターンが３カ所で使われていたら、別のコンポーネントとしてまとめられないか検討する
（構造部分だけ ⇒ Componentレイヤー、それ以外 ⇒ Projectレイヤー）

▽Utility

余白や非表示の設定など、細かい調整を定義。
いわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもつ
ComponentとProjectのモディファイア（パターン）が増えすぎるのを防ぐ
必要に応じて適用したい要素に付与する

• コンポーネント間の間隔を調整する

• 共通の構造を持っていないセクションごとの余白の調整（BEMのBlockとModifierで拡張することが適切でない場合）

• あくまで補助の役割

mb-smallのような相対的な名前にしたり、emや％で指定することを推奨

ComponentとProjectの違い

• ものを構成している部品 ⇒ Component （眼鏡、指輪、ひげ、ソファ、テーブル）

• 部品をあつめてつくられたもの ⇒ Project （人間、部屋）

▼ いくつかのComponentの集まり ⇒ Project
　▷　眼鏡+ひげ+スーツ       　　 ⇒ 人間
　▷　ソファ+ベッド+テーブル    ⇒ 部屋　　みたいなイメージ？

自分なりのまとめ

• Foundation：フォントやベースの部分などサイト全体を通して使うものの定義をする。デフォルト設定

• Layout：サイトをエリアごとにわけ、そのエリア内にあるものの配置などを定義する。例えばヘッダー内にあるロゴやナビゲーションの位置など

• Object：３つに分けて設定する。３回以上使いまわしているものがあれば、ComponentやProjectとして定義する

• Component：一番小さい単位・パーツ。これ以上小さくできないもので構成するイメージ。余白や幅などは含まない。プロジェクトを横断して使いまわしができるもの

• Project：Componentより大きな塊。Componentの集合体。そのプロジェクト固有のデザインなども当てはまる

• Utility：汎用クラス。ComponentやProjectとして定義するには少なすぎる要素や使いまわしている余白などを定義する。モディファイアが増えすぎないようにするために使う