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

2021年7月8日2021年12月4日

1. FLOCSSとは
2. FLOCSSの設計思想
3. FLOCSSの命名規則、ファイル、ディレクトリ構成
4. なぜFLOCSSが必要なのか

FLOCSSとは

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

FLOCSSの設計思想

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

Foundation

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

Layout

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

Object

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

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";