リファレンス実装で始める

テンプレートを取得

GitHub の mflocss/starter で「Use this template」をクリック。リポジトリが作成されます。

依存関係をインストール

pnpm install

開発サーバーを起動

pnpm dev

src/css/ の構造

src/css/ ├── style.css ← エントリーポイント（全層を @import） ├── layer-order.css ← @layer 宣言（優先順位を 1 行で固定） ├── tokens/ ← プリミティブ値（色コード、フォント名等） ├── theme/ ← セマンティック値 + ダークモード ├── foundation/ ← リセット CSS + ベーススタイル ├── layout/ ← 配置と空間（l-section, l-grid 等） ├── component/ ← 再利用パーツ（c-button, c-card 等） ├── project/ ← サイト固有パーツ（p-header, p-hero 等） ├── animation/ ← アニメーション（a-fade-in 等） └── utility/ ← 局所的な調整（u-hidden 等）

style.css がすべての層を @import でまとめるエントリーポイントです。layer-order.css の 1 行で 8 層の優先順位が固定されます。

最初のコンポーネントを追加する

CSS ファイルを作成

@layer component {
  .c-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background-color: var(--color-bg-secondary);
    border-radius: 100vmax;
  }
}

style.css に @import を追加

/* Component */
@import './component/c-tag.css';

HTML で使用

<span class="c-tag">CSS 設計</span>

自分のプロジェクトに合わせる

カラーを変更するには、Tokens と Theme の 2 ファイルだけを触ります。

@layer tokens {
  :root {
    --blue-600: oklch(50% 0.15 250deg);   /* 新しいメインカラー */
    --orange-500: oklch(65% 0.2 50deg);   /* 新しいアクセント */
  }
}

@layer theme {
  :root {
    --color-main: var(--blue-600);
    --color-accent: var(--orange-500);
  }
}

サイト全体のカラーが一括で変わります。Tokens は「素材」、Theme は「意味」——この分離があるから、変更が簡単なのです。

既存プロジェクトへの導入

@layer 宣言を 1 行追加

既存の CSS ファイルの先頭に @layer 宣言を追加します。既存コードに影響はありません。

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

新規パーツだけ mFLOCSS で書く

既存コードはそのまま。新しく追加するパーツだけ @layer で囲んで書きます。既存コードと mFLOCSS のコードは共存できます。

触ったファイルから順に移行

修正やリファクタリングで触ったファイルから順に @layer に移行します。一気にやる必要はありません。

設計思想を深く理解する

設計思想を深く理解すると、判断に迷わなくなります。

書籍を読む 8 層の判断基準を見る

5 分で始める mFLOCSS