Skip to content

ドキュメントを読んで考えるFLOCSSのメリット

業務でFLOCSSを採用することになったので、公式ドキュメントを読んでみました。

なお、筆者のCSS設計スキルは、OOCSS、SMACSS、BEMなどについて軽く勉強したことがある程度です。

※続編を書きました:FLOCSS実践編

FLOCSSとは

ドキュメント:https://github.com/hiloki/flocss

OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

既存のいろんな設計思想のいいとこどりをした設計思想になっています。

基本原則

まず、「レイヤー」という概念があります。

レイヤーには3種類あり、

  • Foundation レイヤー:reset.css の他、背景やフォントなど、基本的なスタイルを定義
  • Layout レイヤー:ヘッダー、フッターなど、レイアウト部分のスタイルを定義。ID による指定を推奨
  • Object レイヤー:
    • Component レイヤー:ボタンなど、最小限のモジュールのスタイルを定義
    • Project レイヤー:Component の集合体に対するスタイルなどプロジェクト固有のスタイルを定義
    • Utility レイヤー:調整用のクラスを定義。いわゆるヘルパークラス

とくに注目すべきところは、Project というレイヤーです。

往々にして、汎用コンポーネントを組み合わせるだけでは作成できないモジュールを作る必要があると思いますが、そういったときに保守性、拡張性を保つための工夫がこの Project レイヤーです。

特定の場合では Component の持つ基本ルールを上書きしたいといったときに、Project レイヤーにルールを記述して Component のルールを上書きしていきます。

複雑なルールを Project というレイヤーに閉じ込めることで、Component 自体がシンプルに保たれるように工夫されています。

そのため理屈上ではヘルパークラスが不要になりますが、FLOCSS ではヘルパークラスの利用が禁止されているわけではなく、「Object のモディファイアで解決することが適切では無い場合」には利用が認められています。

命名規則

ドキュメントによると、

FLOCSS では、オリジナルの BEM のシンタックスではなく、MindBEMding のアイデアを基本的にそのまま取り入れています。

とのことです。

よく見るこういった記法ですね。

このとき、Component には c- 、Project には p- 、Utility には u- というプレフィックスをつけることが推奨されています。

クラス名が冗長になるのを避けたい方は、パターンが増えなさそうな c-, u- はプレフィックスをつけ、p- は省略する、というのがよいでしょう。

これらの規則に加え、FLOCSS ではその他の運用に役立つ命名規則が認められており、たとえば、is- プレフィックスによる修飾が認められています。(is- クラス自体にスタイルを定義することは禁止されています。)

ファイル・ディレクトリ構成

引用します。

このツリー図には含まれていませんが、Sass の mixin などは Foundation レイヤーに含めるべき、とされています。

カスケーディングと詳細度

FLOCSS では、CSS の「後に書いたものが優先される」という性質をいかし、セレクタの詳細度ではなくセレクタの順番を利用してスタイルの上書きを定義していきます。

そのため、ドキュメントにもありますが、レイヤーの順序を前後させることは禁止されています。

Foundation, Layout, Component, Project, Utility の順で記述することにより、サイトの基本的なスタイルが前、より固有のスタイルが後ろになるように設計されています。

これによって、モジュール同士の影響が把握しやすくなり、ルールが複雑に絡まってしまうのを防ぐことができます。

このように、先に定義されたレイヤーを後で定義されたレイヤーで上書きするのが基本方針なので、同レイヤーのモジュール同士でクラスの上書きすることは禁止されています。

例外として、あるモジュールの内部で完結する上書きや、隣接セレクタ、疑似クラスを使ったカスケーディングはすべて許容されています。

具体的には、first-child だったら margin を打ち消すとか、同じモジュールが連続したら border を削除する、といったものですね。

CSSプリプロセッサのExtend

Extend は、モジュールを超えての使用が禁止されています。

モジュール内で完結する場合には、管理が煩雑にならないということで、利用が認められています。

まとめ

Project レイヤーの存在や、スタイルの上書きのルールなど、現実の案件で起こりうる事項が考慮されており、安心して使える BEM、というような印象を受けました。

また、はっきりと「禁止」と書かれているのが

  • “.is-“クラスへのルールの設定
  • レイヤーの順序を前後させること
  • 同レイヤーの異なるモジュール同士でのカスケーディング
  • モジュールを超えたExtend

の4つしか無いため、既存のプロジェクトへの適用も、ハードルなく行えるのではないでしょうか。

※続編:FLOCSS実践編

Comments are closed.