FLOCSS（フロックス） は、OOCSSやBEMなどのコンセプトを取り入れたメンテナンス性・拡張性の高いCSSの構築案です。
これまでBEMを使ってサイトづくりをしてきたのですが、どこかで行き詰まってしまいなんちゃってBEMになっていた私…。
サイトができあがってみるとなかなか複雑な構造で、後になってちょっと変えたいと思ったときに頭を抱えることに。
そんな悩みを解消してくれるCSS設計がいろいろあることを知り、当サイトのリニューアルにメンテナンス性を高められるFLOCSSを採用しました。
今回は、FLOCSSの構成についてまとめてみたいと思います。
もくじ
FLOCSSとは
FLOCSS とは、OOCSS、SMACSS、BEM、SuitCSSやMCSSのレイヤー構成のコンセプトを取り入れた、CSS構成案のひとつです。
FLOCSSの３つのレイヤー構成とBEMの命名規則を合わせて構成することで、メンテナンス性・拡張性の高いCSS設計を実現できます。
公式ドキュメントが日本語で提供されているのも特徴のひとつです。
基本原則
FLOCSSは、Foundation・Layout・Objectの3つのレイヤーで構成します。
さらにObjectレイヤーは、Component・Project・Utilityの３つに分類されます。
└── scss
├── foundation
├── layout
└── object
├── component
├── project
└── utility各レイヤーで定義する内容やルールを紹介していきます。
Foundation
Foundationは、サイトの下地としての背景やフォントなど、サイト全体のデフォルトスタイルを管理するディレクトリです。
ブラウザのデフォルトスタイルの初期化するReset.cssやデフォルトのスタイルを指定するファイルを設置します。
├── foundation
├── _base.scss
└── _reset.scssbase.scss
サイト全体の基本スタイルを定義します。
- 要素セレクタにスタイルを指定する
- サイト全体で使用する基本の文字サイズやフォントファミリーなどを定義する
html {
font-size: 62.5%;
font-family: sans-serif;
}
body {
font-size: 1.6rem;
}reset.scss
ブラウザのデフォルトスタイルを初期化するCSSを定義します。
私はress.cssを使用しています。
※reset.cssは、base.scssよりも先に読み込みましょう！
Layout
Layoutは、ページを構成するヘッダーやメインのコンテンツエリア、フッターなど、サイト全体で共通のレイアウトに関わるスタイルを定義します。
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ └── _main.scssheader.scss
ヘッダーのレイアウトに関わるスタイルを定義します。（他のブロックも同様）
- セレクタは、l-*プレフィックスをつけて命名する*¹
- 位置などレイアウトに関わるスタイルのみ指定する
- 見た目のデザインは Projectで定義する
.l-header {
…
&__logo {
…
}
} *¹ Layoutで定義するブロックは、各ページに１つだけ存在する要素になるので、IDセレクタを採用することも可能ですが、IDセレクタは高い詳細度をもつため、l-* プレフィックスをつけた命名がおすすめです。
Object
サイト内でくり返し使用するスタイルを定義します。
Objectレイヤーは、Component・Project・Utilityの３つの子レイヤーに分かれます。
└──object
├── component
│ ├── _button.scss
│ └── _media.scss
├── project
│ ├── _articles.scss
│ └── _profile.scss
└── utility
├── _clearfix.scss
└── _margin.scssCompornent
ボタンなど、サイト内でくり返し使用するパーツを定義します。
- セレクタは、c-*プレフィックスをつけて命名する
- できるかぎり最低限の機能で定義する
- 固有の色や幅のスタイルをもたせない
- marginなどのレイアウトに関わるスタイルをもたせない
.c-button {
…
&--blue {
…
}
}Project
いくつかのComponentとその他の要素で構成される、大きなブロックやエリアのスタイルを定義します。
- セレクタは、p-*プレフィックスをつけて命名する
- 記事一覧やグローバルナビなど、いくつかの要素が集まったオブジェクトのスタイルを指定する
- Componentで指定しない色や配置などのスタイルをプロジェクト固有のスタイルとして指定する
<ul class="p-articles">
<li class="p-article">
<h1 class="p-article__title">タイトル</h1>
<button type="button" class="p-article__button c-button">ボタン</button>
</li>
</ul>.p-articles { … }
.p-article {
…
&__title {
…
}
&__button {
…
}
}Utility
ComponentとProjectの定義に加えて、少しだけスタイルを調整したいときの便利クラスを定義します。
例えば、最後のセクションだけmarginを0にしたいときなどに役立ちます。
- セレクタは、u-*プレフィックスをつけて命名する
- ComponentやProjectが増えすぎるのを防ぐ
- Componentがもたないスタイルを補う
<section class="p-section">
・・・
</section>
<section class="p-section u-margin--bottom0">
・・・
</section>.p-section { margin-bottom: 10px; }.u-margin--bottom0 { margin-bottom: 0; }命名規則
MindBEMding
FLOCSSでは、BEMシステム（MindBEMding）の命名規則が採用されていて、Block__Element−−Modifierに分類して命名します。
- Block … オブジェクトの名前（article）
- Element … Blockの子要素の名前（article__title）
- Modifier … 色や大きさなどのバリエーションの違い（article−−sub / article__title−−blue）
プレフィックス
各レイヤーごとにプレフィックス（接頭辞）をつけて命名しましょう。
- Layer … l-*
- Component … c-*
- Project … p-*
JavaScriptで操作する要素には、次のプレフィックスをつけて命名ましょう。
- JavaScriptから参照する要素 … js-*
- JavaScriptでスタイルを変化させるセレクタ … is-*
js-*、is-*のついたセレクタ自体にはスタイルを指定せず、「.c-button.is-click」のように元になる要素と合わせてスタイルを指定します。
ディレクトリ構成とファイル統括
ディレクトリ構成
FLOCSSは、Sassなどでディレクトリを分割して管理することがおすすめされています。
モジュール単位でファイルを分割して管理することで、メンテナンス性・拡張性が高まるのがFLOCSS最大の特徴なのだと感じています。
└── scss
├── _style.scss
├── foundation
│ ├── _base.scss
│ └── _reset.scss
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ └── _main.scss
└──object
├── component
│ ├── _button.scss
│ └── _media.scss
├── project
│ ├── _articles.scss
│ └── _profile.scss
└── utility
├── _clearfix.scss
└── _margin.scssファイルを統括する
分割して作成されたファイルは、@importを使ってstyle.scssに呼び出して、１つのCSSファイルにコンパイルします。
/ ==========================
// Foundation
// ==========================
@import "foundation/_reset";
@import "foundation/_base";
// ==========================
// Layout
// ==========================
@import "layout/_footer";
@import "layout/_header";
@import "layout/_main";
// ==========================
// Object
// ==========================
// Component
@import "object/component/_button";
@import "object/component/_media";
// Project
@import "object/project/_articles";
@import "object/project/_profile";
// Utility
@import "object/utility/_clearfix";
@import "object/utility/_margin";おわりに
FLOCSSの構成について紹介しましたが、いかがだったでしょうか？
私は、以前のなんちゃってBEMよりもはるかに見やすいコードになり、こんな便利なものがあったのか〜！と感動の嵐でした。
これまでフレームワークをあまり使ってこなかったのですが、今後いろいろと模索してみたいと感じています。
FLOCSS公式ドキュメント
FLOCSSのについて、もっと詳しく知りたい方は公式ドキュメントをご参照ください。
