はじめに
先日、FLOCSS 設計について社内での共有があった際「FLOCSS 設計において l-container のような汎用的なレイアウトクラスはどこに記述するべきなのか？」という話が上がりました。
例えば以下のようなスタイルになります。
.l-container {
margin: 0 auto;
width: 640px;
}
このスタイルは、コンテンツを内包しつつ左右中央に配置するために使用されるものであり、同一ページ内で再利用されることが考えられます。「配置に関するクラスなので Layout レイヤーに記述する」と考えると全く問題ないように見えますが、後述する FLOCSS 設計における Layout レイヤーの定義においては適切でない書き方となります。
これを期に FLOCSS のドキュメントを再度読み直しつつ、汎用的なレイアウトクラスをどう配置するかということについて考え直してみることとしました。
FLOCSS 設計における Layout レイヤーの定義
FLOCSS の公式ドキュメントで、Layout レイヤーは以下のように定義されています、
Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを採用することも可能です。
ただしIDセレクタは高い詳細度を持つため、それを懸念する場合には、l-* プレフィックスをつけた命名を採用するか、あるいは [id="header"] のような属性セレクタを用いることを推奨します。
ページ単位で唯一の存在である要素となる と書かれているため、l-container のように同一ページ内での再利用が考えられるレイアウトのスタイルは Layout レイヤーに記述するべきではない、というのが FLOCSS の基本設計のようです。
公式ドキュメントでは c-grid が例としてあげられているように、再利用するレイアウトクラスについては Object/Component レイヤーとして定義するのが適切なようです。
FLOCSS の基本設計に則るのであれば、l-container ではなく c-container として、Object/Component レイヤーに記述するのが妥当かもしれません。
Object/Component にレイアウトを記述することへの違和感
ここで一つ違和感が生まれます。
コンポーネントは「再利用できるパターンとして、小さな単位のモジュールを定義します。」と定義されていますが、l-container のようなコンテナーは果たして小さな単位のモジュールだと言えるのだろうか？という部分です。
主観ですが、要素を包含するレイアウトコンテナーを普段からコンポーネントとして定義している方はあまり多くないのではないでしょうか？
Object/Component は、言葉通りに再利用できるパターンとして小さな単位のモジュールを定義し、Layout レイヤーが配置に関する責務を負う方が直感的なように思えます。
汎用的なレイアウトはどこに配置するのがよいのか？
結論から言うと、自分はやはり Layout レイヤーに書くのがよいのではないかと思っています。
FLOCSS による設計ではクラスの上書きを容易にするためにカスケーディング順に厳格性がありますが、Layout レイヤーは Object レイヤーより先に記述される前提となっていますので、記述箇所が Layout になってもカスケーディングによる問題は生まれないように思えます。
また、Object/Component への記述よりも感覚的に正しく、記述ルールに違和感も生まれにくいのではないかと考えています。
となると Layout レイヤーに再利用性のあるレイアウトを記述する上で問題となるのは
- FLOCSS 設計として定義されているルールとして適切ではない
- ページ固有のレイアウトと再利用性のあるレイアウトの混在
というところになるかと思います。
上記の問題を払拭するために、Layout レイヤーの再定義を行うこととします。
Layout レイヤーを再定義する
FLOCSS を考案された、谷拓樹氏は自著『柴犬でもわかるFLOCSS』の中で
「FLOCSS をベースに CSS 設計を考えた時に、Layout を再定義し、役割・責務を変えてしまってもよい」と述べられています。
自分なりに Layout レイヤーをより直感的に再定義するのであれば、現状では以下のようなものになるかと思います。
Layout
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
また、再利用できるレイアウトのパターンとしてのスタイルの記述を許容します。
ページ単位で唯一の存在である要素とは限らないため、Layout レイヤーの要素においても ID セレクタによるスタイリングは禁止します。
その際、本来の FLOCSS 設計におけるページ単位で唯一の存在である要素と、新しく独自で追加した再利用できるコンテナーのパターンとしての要素が混在することとなりますので、後者は layout/_common.scss などとして管理しておくのがよさそうです。
まとめ
今回、自分なりに Layout レイヤーをより直感的で使いやすくするための再定義を行いました。
FLOCSS はあくまで基本原則であり、自身のプロジェクトによってフレキシブルに使用していけるところにも良さがあると思っています。
引き続きプロジェクトに合わせてベストな設計を探っていきたいです。