ディレクトリで役割整理！CSSを破綻させないFLOCSSを紹介！

こんにちは、SHIBAKEN – @dec_shibaken – です

今回はCSS設計手法の一つである、FLOCSSをご紹介させて頂きたいと思います。

様々存在する、CSS設計手法の中で今回紹介させていただく方法は、他の記事でも紹介させて頂いている、BEM、OOCSS、 SMACSSなど手法の美味しいとこ取りをしたものとなっています。

Sassの知識が必要になります。あらかじめご了承ください！
BEMの設計思想を学んでおくことが前提になります。以下の記事を是非、参考にしていただければと思います。

そもそもFLOCSSって？
CSSをディレクトリでカテゴライズ
レイヤーっていう考え方
命名規則を考える時は必ずcss4つの定義

そもそもFLOCSSって？

FLOCSSは、Foundation Layout Object Cascading Style Sheetsの略です。
前述しておりますが、BEM、OOCSS、 SMACSSなど手法の美味しいとこ取りをしたものになっていて、日本の谷拓樹さんによって提唱されたものです。

CSSをディレクトリでカテゴライズ

FLOCSSは、CSSをFoundation Layout Object の３つカテゴリに分けます。

命名規則を考えるということではなく、役割に応じてcssをカテゴリーに分類し、ディレクトリ事に振り分ける手法のことを指します。

Foundation

Reset.cssやNormalize.cssなどを用いたブラウザのデフォルトスタイルの初期化や、プロジェクトにおける基本的なスタイルを定義します。ページの下地としての全体の背景や、基本的なタイポグラフィなどが該当します。

Layout

ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。

基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。
ただしIDセレクタは高い詳細度を持つため、それを懸念する場合には、l-* プレフィックスをつけた命名を採用するか、あるいは [id="header"] のような属性セレクタを用いることを推奨します。

Object

OOCSSのコンセプトを元に、プロジェクトにおける繰り返されるビジュアルパターンをすべてObjectと定義します。

FLOCSSでのObjectは、さらに次の3つのレイヤーに分けられます。

Component

再利用できるパターンとして、小さな単位のモジュールを定義します。

一般的によく使われるパターンであり、例えばBootstrapのComponentカテゴリなどに見られるbuttonなどが該当します。

出来る限り、最低限の機能を持ったものとして定義されるべきであり、それ自体が固有の幅や色などの特色を持つことは避けるのが望ましいです。

Project

プロジェクト固有のパターンであり、いくつかのComponentと、それに該当しない要素によって構成されるものを定義します。

例えば、記事一覧や、ユーザープロフィール、画像ギャラリーなどコンテンツを構成する要素などが該当します。

Utility

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

Utilityは、Component、ProjectレイヤーのObjectを無尽蔵に増やしてしまうことを防いだり、またこれらのObject自体が持つべきではないmarginの代わりに.mbs { margin-bottom: 10px; }のようなUtility Objectを用いて、隣接するモジュールとの間隔をつくるといった役割を担います。

またclearfixテクニックのためのルールセットが定義されているヘルパークラスも、このレイヤーに含めます。