「FLOCSS のテンプレートを使っているのに、気づけば CSS がぐちゃぐちゃになっている」——メンタリングをしていると、この相談をよく受けます。
テンプレートは「結果」であって「判断の過程」ではない。
テンプレートが解決してくれるのは、ディレクトリ構成とファイルの置き場所だけ。でも実際のコーディングで迷うのは、もっと手前の判断です。
同じテンプレートを使っているのに、人によってまったく違うコードが生まれるのは、判断基準が共有されていないからです。
最初は問題なく動いていた CSS が、修正を重ねるうちに崩壊していく。この過程を見てみましょう。
/* はじめは素直なコード */
.button { /* 詳細度 (0, 1, 0) */
background: #007bff;
color: #fff;
padding: 12px 24px;
}
/* カード内のボタンだけ色を変えたい */
.card .button { /* 詳細度 (0, 2, 0) — 勝つ */
background: #28a745;
}
/* 全ボタンを青に統一したくなったが、(0, 1, 0) では勝てない… */
.button { /* 詳細度 (0, 1, 0) — 負ける */
background: #007bff !important; /* !important で強制上書きするしかない */
}
.header .button のようにセレクタを重ねて書く（子孫結合子）と、詳細度が上がります。すると、それより詳細度の低いセレクタではスタイルを上書きできなくなり、さらにセレクタを深く重ねたり !important で対抗するしかなくなります。
設計とは「未来の自分を助ける仕組み」です。いま動くかどうかではなく、半年後に修正しても壊れないかどうか。その視点で CSS を書くために、設計思想が必要なのです。
現在、CSS 自体が大きく進化しています。@layer でカスケードの優先順位を制御でき、CSS Nesting で Sass なしにネスト記法が書ける。:has() で親要素の状態に応じたスタイリングが可能になり、Container Queries でコンポーネント単位のレスポンシブが実現した。@scope によるネイティブなスコーピングも全ブラウザで利用可能になりました。かつて Sass や命名規則で「回避」していた問題を、ブラウザが「解決」してくれる時代です。
| アプローチ | 代表 | 考え方 |
|---|---|---|
| Utility-first | Tailwind CSS | クラス設計を放棄し、HTML にユーティリティを直書きする |
| CSS-in-JS | Styled Components | JS フレームワークのコンポーネント単位でスタイルをスコープ化 |
| CUBE CSS | Andy Bell | CSS の Cascade を活かした分類（Composition / Utility / Block / Exception） |
| ネイティブ CSS | @layer, :has(), @scope 等 | ブラウザ標準機能が設計手法の役割を吸収しつつある |
| Layer 分類系 | BEM, FLOCSS | CSS を Layer で分類し、命名規則で構造を示す。2014年以降、新手法なし |
技術としては不要になりつつある。でも思考フレームワークとしては必要。
@layer は層の優先順位を強制してくれますが、「このスタイルはどの層に書くべきか」は教えてくれません。道具がどんなに進化しても、「どこに何を書くか」という設計判断は人間がやるしかない。
mFLOCSS（エムフロックス）は、日本発の CSS 設計手法 FLOCSS の設計思想を継承しつつ、モダン CSS の力で再構築した設計手法です。
| 層 | FLOCSS | mFLOCSS | 役割 |
|---|---|---|---|
| Tokens | — | 新設 | プリミティブなデザイントークン |
| Theme | — | 新設 | Tokens をセマンティック変数にマッピング |
| Foundation | あり | 継承 | ブラウザ環境の初期化と基本スタイル |
| Layout | あり | 継承 | 位置と空間の配置 |
| Component | Object 配下 | トップレベル化 | 再利用できるパーツ |
| Project | Object 配下 | トップレベル化 | サイト固有のパーツと文脈 |
| Animation | — | 新設 | 動きの分離管理 |
| Utility | Object 配下 | トップレベル化 | 単一目的のスタイル上書き |
Tokens と Theme を分離した理由は関心の分離です。Tokens は「この青色の oklch 値はいくつか」という問いに、Theme は「プライマリカラーとしてどの色を使うか」という問いに答えます。別の問いに答える層だから、分けるのです。
このサイト自体が mFLOCSS で設計されています。Layers ページで、各層の詳細な判断基準を見ていきましょう。