FLOCSSとは何か?CSSの設計思想について解説

FLOCSSとは

FLOCSSとはCSSの設計思想のひとつです。CSSをFoundationLayoutObjectの3つの階層に分類し、Objectについてはさらに3つの階層に分類することで、メンテナンス性の高いCSS構造を実現します。
国産のCSS設計思想であり、公式ドキュメントが日本語であることも人気の要因でしょう。

FLOCSSの設計思想

ここからはFLOCSSの構成要素であるFoundation、Layout、Objectについて解説していきます。

Foundation

Foundationはサイト全体の背景やフォントなどのデフォルトのスタイルを定義します。

Layout

Layoutはヘッダーやフッター、ナビゲーションやサイドバーなど、各ページで共通するコンテナを定義します。

Object

Objectは全体を通して再利用可能なモジュールを定義します。
Objectはさらに3つの階層に分類されます。

Component

Componentは最も小さなモジュールの単位です。
ボタンやナビゲーションなど。他のプロジェクトでも汎用的に使用できるものを定義します。

Project

Projectはプロジェクト固有の見た目を有するものを定義します。
ユーザープロフィールなどの要素が該当します。

Utility

Utilityは余白や非表示の設定など、細かい調整を定義します。
必要に応じて適用したい要素に付与していきます。

FLOCSSの命名規則、ファイル、ディレクトリ構成

FLOCSS固有のルールとして、 Objectにはプレフィックスを付けます。Componentには「.c-*」を、Projectには「.p-*」を、Utilityには「.u-*」をそれぞれ付与します。
基本的なファイル構成は次のとおりです[1]https://github.com/hiloki/flocss

/* =============================================
   Foundation
   ============================================= */

/* Reset
   ----------------------------------------------------------------- */

html, body, div, … { … }

/* Base
   ----------------------------------------------------------------- */

body { … }


/* =============================================
   Layout
   ============================================= */

/* Header
   ----------------------------------------------------------------- */

#header { … }

/* Main
   ----------------------------------------------------------------- */

#main { … }


/* =============================================
   Object
   ============================================= */

/* Component
   ----------------------------------------------------------------- */

/**
 * Button
 *
 * Blah Blah Blah
 */

.c-btn { … }
.c-btn--primary {
  ...
}

/**
 * Media
 */

.c-media { … }
.c-media__image {
  ...
}

/* Project
   ----------------------------------------------------------------- */

/**
 * Articles
 */

.p-articles { … }
.p-article {
  ...
}
.p-article__title {
  ...
}

/* Utility
   ----------------------------------------------------------------- */

/**
 * Clearfix
 */

.u-clearfix {
  ...
}

/**
 * Display
 */

.u-block {
  ...
}

/**
 * Margin
 */

.u-mbs { /* Margin-Bottom: Small; */
  ...
}

CSSファイルを結合できる場合は、下記のようにディレクトリを分割します。例えば、Sassを利用した場合は以下のようになります[2]https://github.com/hiloki/flocss

├── foundation
│   ├── _base.scss
│   └── _reset.scss
├── layout
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _main.scss
│   └── _sidebar.scss
└── object
    ├── component
    │   ├── _button.scss
    │   ├── _dialog.scss
    │   ├── _grid.scss
    │   └── _media.scss
    ├── project
    │   ├── _articles.scss
    │   ├── _comments.scss
    │   ├── _gallery.scss
    │   └── _profile.scss
    └── utility
        ├── _align.scss
        ├── _clearfix.scss
        ├── _margin.scss
        ├── _position.scss
        ├── _size.scss
        └── _text.scss

上記のようなディレクトリ構成を用いた場合、CSSファイルを統括するためのCSSファイルを別に用意する必要があります。

// ============================================
// Foundation
// ============================================

@import "foundation/_reset";
@import "foundation/_base";

// ============================================
// Layout
// ============================================

@import "layout/_footer";
@import "layout/_header";
@import "layout/_main";
@import "layout/_sidebar";

// ============================================
// Object
// ============================================

// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------

@import "object/component/_button";
@import "object/component/_dialog";
@import "object/component/_grid";
@import "object/component/_media";

// -----------------------------------------------------------------
// Project
// -----------------------------------------------------------------

@import "object/project/_articles";
@import "object/project/_comments";
@import "object/project/_gallery";
@import "object/project/_profile";

// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------

@import "object/utility/_align";
@import "object/utility/_clearfix";
@import "object/utility/_margin";
@import "object/utility/_position";
@import "object/utility/_size";
@import "object/utility/_text";

なぜFLOCSSが必要なのか

CSSの設計指針がない場合、命名規則やディレクトリ構成が乱雑になりがちです。チームで開発を行う場合、メンバーそれぞれが思うままにCSSセレクタを命名したり、意図の不明なディレクトリを作成したりして収集がつかなくなります。メンテナンス性が非常に悪くなり、レイアウト崩れなどの原因になります。

そうならないためにFLOCSSなどの設計思想を取り入れます。FLOCSSを取り入れることでファイル名やディレクトリ名、セレクタ名などがルール化され可読性向上が見込めます。

FLOCSSは特に、OOCSS(Object Oriented CSS)やBEM、SMACSS(Scalable and Modular Architecture for CSS)など各種CSS設計思想のコンセプトが取り入れられており、モダンなCSS構成を実現できます。

1,2https://github.com/hiloki/flocss