その CSS、
なぜそこに書いた？

mFLOCSS は CSS の設計判断を 8 つの層で整理する思考フレームワーク。
@layer によるカスケード制御で、詳細度の衝突から解放されます。

書籍を読む GitHub で見る

設計がないと、CSS は壊れる

プロジェクトが成長するほど深刻になる、CSS の構造的な問題。

詳細度の衝突

セレクタの上書き合戦が始まり、!important が増殖する。修正するほどカスケードが複雑になる悪循環。

デザイントークンの散在

色の値がファイルに散らばり、ダークモード対応で破綻する。プリミティブ値とセマンティック値の区別がない。

アクセシビリティの対応漏れ

prefers-reduced-motion の対応がファイルに散在し、抜け漏れが発生する。仕組みで担保できていない。

@layer で、詳細度の心配をなくす

.header .button { background: #ff6600; }
.sidebar .content .button { background: #28a745 !important; }

@layer component {
  .c-button { background: var(--color-main); }
}
@layer project {
  .p-hero .c-button { background: var(--color-accent); }
}
/* 宣言順で project > component。詳細度の心配は不要 */

8 つの層で、CSS の判断基準を体系化する

mFLOCSS は CSS を 8 つのフラットな層に分類します。
各層は @layer で優先順位が固定され、詳細度の衝突が起きません。

Tokens

プリミティブトークン

oklch 色コード、フォントスタック、数値スケール。意味を持たない「素材」を一箇所に集約する。

Theme

セマンティックテーマ

Tokens に意味のある名前を与える。--color-main のように。ダークモードは Theme だけで切り替わる。

Foundation

ベーススタイル

リセット CSS と要素セレクタのデフォルト。:where() でゼロ詳細度を維持する。

Layout

ページの骨格

セクション、グリッド、スタック。中身の見た目に関与せず「配置と空間」だけを担当する。

Component

再利用パーツ

別のサイトにそのまま持っていけるパーツ。ボタン、カード、見出し、バッジなど。

Project

サイト固有パーツ

このサイトのデザインに依存するパーツ。ヘッダー、フッター、ヒーローセクションなど。

Animation

動きの管理

アニメーションを分離し、prefers-reduced-motion 対応を一元管理する。

Utility

局所的な調整

最後の手段。他の層で解決できない微調整のみ。!important で最高優先度を保証する。

各層の判断基準を見る

mFLOCSS の特長

@layer ネイティブ設計

ブラウザネイティブの @layer でカスケードを制御。セレクタの詳細度に依存しない、宣言的な優先順位管理。

Tokens-Theme 分離

プリミティブ値（Tokens）とセマンティック値（Theme）を明確に分離。ダークモードは Theme 層の切り替えだけで完結。

Pure CSS

Sass も PostCSS も不要。ブラウザが直接解釈するモダン CSS だけで構築。ビルドツールへの依存から解放される。

判断基準を、体系的に学ぶ

mFLOCSS の設計判断を体系的に学べる技術書。
ch0・ch1 は無料で読めます。まずは設計思想に触れてみてください。

無料で読み始める書籍の詳細を見る

その CSS、なぜそこに書いた？