こんにちは、フロントエンドエンジニアの中村です。
「FLOCSSで始めるCSS設計」第３回目となります。
過去回は以下になりますので、まだ読まれていない方はぜひこちらもよろしくお願いします。
さて、今回はFLOCSSの”Layout”レイヤーについてお送りいたします。
Layoutレイヤーの定義
Hiroki tani氏（@hiloki）のドキュメントによるとこう書かれています。
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
基本的には、ページ単位で唯一の存在である要素となるため、Layoutレイヤーの要素ではIDセレクタを使うことを推奨します。 IDセレクタはセレクタの詳細度を高めてしまうため、他のレイヤーやモジュールでは推奨しません。
上記の通り、Layoutレイヤーはかなり大きめのコンテナブロック（ワイヤーフレームでざっくりと書いてしまうくらいのイメージでしょうか）の定義に使われ、必要であればIDの使用も許可されます。ここは他のレイヤーとは違う特徴です。
IDが許可される理由は、ページにおいてヘッダー,フッターなどの要素は多くの場合ただ一つであることによります。
また、Componentの.c-に習って.l-headerのようにしても構いません。
むしろ、IDセレクタを使わずクラスのみで運用するんだと決めてしまってもいいくらいだと私は思うのですが、慣習的に#headerや#footerのようにIDで運用されることが多いためIDでの運用も可というようになっているようです。
（また、.l-プレフィックスは厳密にいうとFLOCSSのドキュメントにはありません。しかし、FLOCSSの元になったSMACSSに同様にLayoutというカテゴリがあり、そこでは.l-プレフィクスが使用されています。その思想を継承しているとすれば、.l-プレフィックスによるレイアウトを行うことに問題はないでしょう。）
実例
以下にLayoutレイヤー（.l-プレフィックスを用いたもの）の実例を示します。
それぞれにpaddingであったり、メディアクエリを指定したりしています。
See the Pen Layout sample by nayu (@nayucolony) on CodePen.
なぜLayoutレイヤーが独立しているのか？
ここまで書いていても、Layoutレイヤーは、ただ単純にページにおけるヘッダー、フッター、サイドバーなどの要素を分けるためだけに存在しているレイヤーという情報しか出てきていませんが、まさにその通りです。それらのために存在するレイヤーです。
もしかすれば、これらの要素を.c-headerや.p-footerのようにコンポーネントとして考えることも可能かもしれません。（まだ.p-プレフィクスについては記事を書いていませんが、比較的Componentに近いものです）
ですが、IDによる運用を想定したとき、ProjectレイヤーやComponentレイヤーに含めると、せっかくプレフィクスで管理できていたものに紛れ込んでしまいますし、Objectレイヤーは、そもそも、再利用できる小さな単位を管理するというものです。
では、ページ全体を大きな枠組みで捉えた場合、その大きな枠組みの中にComponentたちを組み込んでいく際はどうするのでしょうか？また、枠組みそのもののスタイリングは？レイアウトは？挙動は？
そういうことを考えた際に登場するのがLayoutレイヤーと思っていただければよいのではないかと思います。
性質上、運用においても、まったくスタイリングがなかったり、せいぜいz-indexであったりpaddingをいくらか設定したりということはよくあると思います。
そういう時に「あれ、Layoutレイヤー、ちゃんと使えているのだろうか？」と不安になる必要はありません。
俯瞰的に見ると、その部分を担当できるのは、Layoutレイヤーしかないと感じるでしょう。
とくに最近のwebサイトでは、横幅に応じたheaderやfooterの調整が多々発生しがちです。
例えばレスポンシブwebサイトにおいて「ある幅でサイドバーが消える」「ヘッダーの高さが減る」といった場合もLayoutレイヤーが担当できます。
そう考えると、たかが３〜４つ程度の要素のスタイリングのためだけに、という感じもしなくなるのではないでしょうか？
ひとまず、ここは運用していくことで慣れていきましょう。
いかがだったでしょうか。
Layoutレイヤーに対して少し長く書いてしまいましたが、私自身、ドキュメントやその他で情報を集める時、Layoutレイヤーに関する部分がずっとつかめずにいました。
何せ、役割が少ない分、2~3行で済んでしまう部分がほとんどだからです。
そういうこともあり、今回あえて運用における実例も交えて長めに書くことにしました。これを読んでいる方が、少しでも腑に落ちるような記事になっていれば幸いです。
この連載に関するご意見やご感想がありましたら、ぜひtwitter(@nayucolony)までお気軽にメンションいただけたらと思います！
気に入っていただけましたら、Facebookでのシェア、いいね、Tweet、はてブなど、是非ともお願い致します！
フロントエンドエンジニア積極採用中
株式会社トゥーアールでは現在フロントエンドエンジニア積極的に採用中です！
興味がある人は採用ページをチェック！！
