フロントエンドエンジニア

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

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

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

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

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

そもそもFLOCSSって?

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

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

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

命名規則を考えるということではなく、役割に応じて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テクニックのためのルールセットが定義されているヘルパークラスも、このレイヤーに含めます。

レイヤーっていう考え方

ここまで説明させて頂いたカテゴリーは、その他の設計手法と異なって、レイヤーという考え方を持ち合わせています。

レイヤーは、優先度に影響します。このルールを用いることで、スタイルの汚染を防ぐことが出来ます。

抽象的

プロジェクトにおける基本的なスタイルを定義しているものなので、全方位の要素に適用されるものだが、特定の要素に合わせたclassではないので、優先度は低い。

具体的

固有の要素などに設定させるclassなので、抽象的なclassよりも優先度は高い。しかし、特定の要素に限定されるので、適用範囲が狭い。

命名規則を考える時は必ずcss4つの定義

cssの設計手法を考える時に必要な4つの定義があるので、まずはそちらを紹介いたします。以下の通りです。

・予測しやすい(可読性)
・再利用しやすい(再利用性)
・保守しやすい(メンテナンス性)
・拡張しやすい(拡張性)

CSSの設計を破綻させない「良いCSS」にする為の4つ定義こんにちは、SHIBAKEN - @dec_shibaken - です これからマークアップを初めて行く人に、是非考えて読んでいた...

こんな感じです。

いかがでしたでしょうか?

FLOCSSは日本人が考案者ですし、ドキュメントも読みやすくというのが良いですよね。

しかし、一方では様々な設計手法を織り交ぜているため、FLOCSSに限らず、BEM、OOCSS、 SMACSSなどへの知識なども必要になり、導入までにそこそこの学習時間が必要になります。

ご参考の上、CSS設計思想をサイト設計に取り入れてみてはいかがでしょうか?

ありがとうございました!

BEM、OOCSS、 SMACSSなどに興味がある方はこちらから!

フリーランス / ブロガー
SHIBAKEN
埼玉生まれ東京育ちの独身30代男。 都内の出版社でWebデザイナーとして就職。その後転職し、制作会社でフロントエンドエンジニアとして6年間従事。 現在は会社を退職し、フラリフラリと風に吹かれながらフリーランスとして現在に至る。

プロフィールの詳細はこちら
\ Follow me /