自由に書けるからこそ、運用していくとカオスになりがちなCSS。

改めてCSS設計とFLOCSS（フロックス）について考えてみました。

今回はFLOCSSのポイントを私なりにまとめたいと想います。

FLOCSSとは

FLOCSSとは、Hiroki tani氏によって考案された国産のCSS設計思想です。

ドキュメントはGithub上にて公開されています。
FLOCSS

その特長は以下のとおりです。

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

FLOCSSドキュメントより

CSS設計や命名規則の有名所のいいとこどりをした、実践的なCSS設計です。

基本構造

FLOCSSは次の3つのレイヤーと、Objectレイヤーの子レイヤーで構成されます。

1.Foundation - reset/normalize/base...
2.Layout - header/main/sidebar/footer...
3.Object
　　ⅰ.Component - grid/button/form/media...
　　ⅱ.Project - articles/ranking/promo...
　　ⅲ.Utility - clearfix/display/margin...

FLOCSSドキュメントより

Foundation、Layout、Objectという3つのレイヤー（階層）に分かれており、
それぞれのレイヤーごとに定義されるCSSの内容が決まっています。

それぞれのレイヤーにフォーカスを当て、何を定義しているのかみていきましょう。

Foundation

サイト全体のデフォルトスタイルを管理します。

リセットCSSの設定やサイト全体で使う背景、基本的なタイポグラフィを設定します。
昔のcommon.cssに近いものがありますね。

要素セレクタに直接設定するものが多いと思っています（imgタグやaタグなど）。
リセットCSSでブラウザ独自のスタイルを初期化し、プロジェクトに合わせてデフォルト要素を設定します。
このレイヤーで定義されたCSSは運用中に変更すると全体に大きく影響するため、初期に設定してから後々変更される、ということはあまりないでしょう。

Layout

サイト全体で共通するレイアウト＝枠を管理します。
ヘッダー、メインコンテンツエリア、サイドバー、フッターなどのスタイル管理に当たります。
サイドバーなどは一部のページでしか使われないケースもあり、Layoutに含めていいか迷いますが、私は含めて良いと思います。

絶対に上書きされないように、Layoutで管理するものは
[id="header"]
のようにIDを振るのもいいかと思われます。
この部分は、プロジェクトで予め決めておくと良いでしょう。

Object

サイトにおけるビジュアルパターンはすべてObjectにて定義します。
ObjectはOOCSSのコンセプトが元になっています。

各ページで使用するデザインパーツはObjectで定義します。

FLOCSSでのObjectは、さらに次の3つの階層に分けられます。

1.Component

機能単位で分割した小さなモジュールを定義します。
再利用できるパターン（ボタンなど）が該当します。

なお、Componentでは固有のサイズや色などを持つことは好ましくありません。
あくまで形のみを定義し、色やサイズは次に説明するPropjectもしくはUtilityで定義しましょう。
また、marginなどの余白を定義しないパーツとして扱いましょう。

2. Project

サイト固有のパターンを定義します。
Componentとそれに該当しないものを含みます。
例えば、ボタンつきのカードなどです。

ProjectとComponentの区別としては以下を意識するといいでしょう。

• 小さい単位のComponentを集めて、一つのObjectとして扱いたい時
• Componentとするには大きすぎるObjectとなる時

3. Utility

少し複雑になるので、ドキュメントから抜粋します。

ComponentとProjectレイヤーのObjectのモディファイアで解決することが難しい・適切では無い、わずかなスタイルの調整のための便利クラスなどを定義します。

FLOCSSドキュメントより

余白の細かな調整などを定義します。
例えばカードProjectを定義していたとして、特定のページではカードの余白を小さくする必要がある時などです。

また、ClearfixなどのヘルパークラスもUtilityで定義します。

ComponentとProjectの違い

ここが人によって解釈がわかれそうなポイントかと思われます。
最小単位のモジュールをどこまでとするかは、プロジェクトで定義してほしいところです。

個人的にはAtomic DesignのAtoms（原子）がComponent、
Molecules（分子）やOrganisms（有機体）がProjectと解釈しています。

Projectの粒度が揃わないところに若干の気持ち悪さを覚えるかもしれませんが、仕方ないのかな、と思っています。

命名規則

命名規則はMindBEMdingを採用しています。
モジュールをBlock、Element、Modifierにわけて考え、それぞれを.Block__Element--Modifierのようにつなげて記述します。

プレフィックスの付け方やディレクトリ構造など、詳しい定義はFLOCSSドキュメントに記載されています。
ぜひ一度目を通してみてください。

所感

FLOCSSを知ったきっかけは、OOCSSやBEM、SMACSSでは運用上しっくりこなく、他にCSS設計思想はないか調べたことがきっかけでした。

FLOCSSはOOCSSやBEM、SMACSSのいいとこ取りをした設計思想のため、プロジェクト毎に細かい定義付けをつけてあげれば実用に耐えられるものかと想います。

ただし、デザイナーがデザインシステムを意識せずに作成していた場合、FLOCSSでCSSを構成するのは難しくなると思われます。
結果的にProjectが膨大に膨れ上がり、管理が難しくなることが予想されます。

逆に、AtomicDesignと相性が良いのではないかと思います。

難点は、学習コストの高さでしょうか。
しかし、CSSの設計を行う上で避けては通れない考え方が元になっているので、
しっかり身につけたいですね。