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

テンプレートは「結果」であって「判断の過程」ではない。
mFLOCSS は CSS の設計判断を8つの層で整理する、思考フレームワークです。

設計思想を学ぶ 8層を理解する

8層アーキテクチャ

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

Tokens

プリミティブトークン

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

Theme

セマンティック変数へのマッピング

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

Foundation

ブラウザ環境の初期化と基本スタイル

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

Layout

位置と空間の配置

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

Component

再利用パーツ

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

Project

サイト固有のパーツと文脈

サイト固有のデザインに依存するパーツ。Component を組み合わせ、文脈に応じた配置・装飾を担う。

Animation

動きの分離管理

アニメーションを分離し、prefers-reduced-motion と scripting の 2 条件を一元管理する。

Utility

単一目的のスタイル上書き

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

@layer で詳細度を制御する

道具がどんなに進化しても、「どこに何を書くか」という設計判断は人間がやるしかない。

@layer tokens, theme, foundation, layout, component, project, animation, utility;

この 1 行で、8つの層の優先順位がブラウザに明示的に固定されます。セレクタの詳細度に関係なく、後に宣言された層ほど優先度が高くなります。 !important に頼る必要は、もうありません。

.card .button { background: #28a745; }             /* (0, 2, 0) */
.card .button.is-featured { background: #ff6600; } /* (0, 3, 0) で対抗… */

@layer component {
  .c-card .c-button.-accent { background: var(--color-accent); } /* (0, 3, 0) */
}
@layer project {
  .p-hero .c-button { background: var(--color-hero); }          /* (0, 2, 0) */
}
/* project の詳細度が低くても、layer 宣言順で project が勝つ */

設計思想を身につけよう

このサイト自身が mFLOCSS で設計されています。
ソースコードを読みながら、設計の判断基準を体験してください。

設計思想を読む

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