FLOCSSについて調べてみた

FLOCSS(フロックス)はCSSの設計手法の一つで、OOCSSやSMACSS、BEMなどのコンセプトが取り入れられています。
今回はFLOCSSの考え方や使い方について調べてみたのでメモ。

基本原則

FLOCSSでは以下のようなレイヤーによって構成されています。

• Foundation
• Layout
• Object
  • Component
  • Project
  • Utility

読み込む順番も上のFoundationから順々に読み込むようにする必要があります。
　

Foundation

reset.cssやnormalize.cssなどのような、サイト全体で適用される各要素のリセットを行います。
そのプロジェクト用の基本的なスタイルもここで指定します。
　

Layout

ヘッダーやフッター、メインコンテンツエリア、サイドバーなどのページを構成するレイアウトパーツを指定します。
基本的にはページ内で単一の存在となるため、IDを使うことが推奨されています。
　

Object

プロジェクトで繰り返されるパターンを指定します。
　

Component

汎用性が高く、再利用可能なモジュールを指定します。
プレフィックスで「c-」をつけるようにします。
　

Project

プロジェクト内での固有のパターンを指定します。
プレフィックスで「p-」をつけるようにします。
　

Utility

細かくスタイル調整を行いたいときのヘルパークラスなどを指定します。
プレフィックスで「u-」をつけるようにします。
　

命名規則

命名規則はBEMから派生したMindBEMdingを使用しています。

JavaScriptで操作されている状態を表すModifierは、プレフィックスで「is-」をつけるようにします。

HTML

<button class="c-button is-active">Save</button>

CSS

.c-button {}
.c-button.is-active {}

.is-active単体にスタイルを指定すると、他のモジュールで.is-activeを使用している場合に汚染してしまうため、禁止になっています。

またObject内のレイヤーにも、役割を明確にするためプレフィックスをつけるようにします。

• Component: 「c-」
• Project: 「p-」
• Utility: 「u-」

上書きと詳細度

モジュール間の上書きや、他のモジュールを親とする上書きは原則禁止になっています。

CSS

.c-dialog {}
.c-button {}
.c-dialog .c-button {}
.p-comments {}
.p-articles .p-comments {}

例外として、ProjectからComponentモジュールを変更することはできます。

HTML

<div class="p-user-list c-grid">
	<div class="c-grid__item">ユーザー情報</div>
</div>

CSS

.c-grid {}
.c-grid__item {}

.p-user-list {}
.p-user-list > .c-grid__item {}

ただし、以下のようにProjectのElementを指定するか、ComponentのModifierを指定して解決できる場合があります。

ProjectのElementを指定する場合

HTML

<div class="p-user-list c-grid">
	<div class="p-user-list__item c-grid__item">ユーザー情報</div>
</div>

CSS

.c-grid {}
.c-grid__item {}

.p-user-list {}
.p-user-list__item {}

ComponentのModifierを指定する場合

HTML

<div class="p-user-list c-grid">
	<div class="c-grid__item c-grid__item--user">ユーザー情報</div>
</div>

CSS

.c-grid {}
.c-grid__item {}
.c-grid__item--user {}

.p-user-list {}

この対応方法の場合だと、詳細度を上げてしまうのを防ぐことができます。
　

【参考サイト】

• GitHub – hiloki/flocss: CSS organization methodology.
• FLOCSSとは？ – FLOCSSで始めるCSS設計 – to-R Media
• 【CSS設計】FLOCSSを導入してみて気づいた８つのポイント | 株式会社インディバル