Web制作の現場では、保守性・再利用性・スケーラビリティを考慮したCSS設計が求められます。
特にAIによる自動コード生成を想定するなら、構文の曖昧さを一切排除した厳密なルールが必須です。
本記事では、そうした背景から生まれたCSS設計思想
「DaiCSS（Designable Architecture for Integrated CSS Systems）」 の全容を紹介します。
明確な命名規則・責務分離・構造管理によって、人間とAIの双方にとって扱いやすいCSS基盤を提供することを目的としています。
目次
DaiCSSの目的
- AIによる自動コード生成を可能にする、曖昧さのない構文ルールの策定
- 保守性・再利用性・スケーラビリティのあるCSSを実現するための厳格なガイドラインを提供
- FLOCSSやBEMの思想を継承・拡張しつつ、より実務的なCSS設計を体系化
ディレクトリ構成（Sass）
scss/
├── _global/ # グローバル関数・定数・mixinなど
├── bases/ # ベース、初期化、ルート変数
├── js/ # JS連携スタイル
├── layouts/ # レイアウト構造
├── modules/ # UIモジュール
├── pages/ # ページ固有
├── utilities/ # ユーティリティ
└── style.scss # 全体を統合・@useで読み込むエントリーポイント_global
全ファイルで共通して使用する Sass 関数・mixin・定数などのロジック要素を格納します。
各ファイルは必要に応じて @use で読み込みます。
- _breakpoints.scss
- _functions.scss
- _index.scss など
bases
リセットCSSやCSSカスタムプロパティ（:root に設定するグローバル変数）、html, body の初期スタイルなど、スタイルの土台を格納します。
- _resets.scss
- _variables.scss
- _base.scss
- _index.scss など
js
JavaScriptの動作と連携するスタイルを格納します。
- _js-accordion.scss
- _js-modal.scss
- _index.scss など
layouts
レイアウト構造のためのスタイルを格納します。
- _l-inner.scss
- _l-grid.scss
- _index.scss など
modules
再利用可能なパーツのスタイルを格納します。
ボタンやカードなど「構成単位」として機能するブロックです。
- _m-button.scss
- _m-card.scss
- _m-article-content.scss
- _index.scss など
pages
特定ページ専用のスタイルを格納します。
基本的にURL単位でのスタイル管理です。
- _p-home.scss
- _p-about.scss
- _p-faq.scss
- _p-privacy-policy.scss
- _index.scss など
utilities
1つの明確な目的・機能を持つユーティリティクラス群を格納します。
1つのクラス名に複数のプロパティを含んでも、意味が一貫していればOKとします。
- _u-bg.scss
- _u-font-weight.scss
- _u-hover.scss
- _u-only.scss
- _u-visually-hidden.scss
- _index.scss など
クラス名の命名規則
命名構文の基本構造
基本（utilities以外）
[接頭辞]-[ブロック名]__[エレメント名]--[モディファイア名]utilities
u-[機能名]--[モディファイア名]クラスの接頭辞一覧
| 用途 | 接頭辞 | 例 |
|---|---|---|
| bases | （なし） | （自由に命名可能） |
| js | js- | js-accordion |
| layouts | l- | l-inner |
| modules | m- | m-cardm-button |
| pages | p-[ページ名]- | p-home-newsp-about-history |
| utilities | u- | u-font-weight--700u-bg--primary |
命名上の禁止事項
- セレクタの入れ子は、原則2階層まで
- ID選択子・タグ選択子は禁止（ユーティリティ以外）
.m-*は 1要素に1モジュールクラスのみ- 状態は
--modifier形式で記述（例:.m-button--secondary）
カスタムプロパティ（CSS変数）の命名規則
グローバル変数（:root 内）
--[カテゴリ]__[用途]--[バリエーション]ローカル変数（モジュール・レイアウト内部）
--_[カテゴリ]__[用途]--[バリエーション]カスタムプロパティ（CSS変数）の例
| カテゴリ | 用途 | 例 |
|---|---|---|
font-size | フォントサイズ | --font-size__body --font-size__title--sm |
font-family | フォントファミリー | --font-family__body |
color | 色 | --color__primary --color__primary--light --color__red --color__red--light |
space | 余白 | --space__block--section--space__inline--inner |
radius | 角丸 | --radius__button |
opacity | 透過度 | --opacity__hover |
duration | アニメーションの時間 | --duration__all |
max-width | 最大幅 | --max-width__container |
width | 横幅 | --width__breakpoint |
カスタムプロパティ（CSS変数）の設定規則
数値変数には単位をつけない
NG例
.l-test {
--_space__top: 30px;
padding-top: var(--_space__top);
}OK例
.l-test {
--_space__top: 30;
padding-top: calc(var(--_space__top) * 1px);
}グローバル変数は上書きしない
NG例
グローバル変数を直接変更してはいけない。
:root {
--space__inline--inner: 25;
}
.l-test {
padding-inline: calc(var(--space__inline--inner) * 1px);
}
@media (max-width: 767px) {
.l-test {
--space__inline--inner: 10;
}
}OK例
一度ローカル変数に格納してから、上書きを行う。
:root {
--space__inline--inner: 25;
}
.l-test {
--_space__inline: var(--space__inline--inner);
padding-inline: var(--_space__inline);
}
@media (max-width: 767px) {
.l-test {
--_space__inline: 10;
}
}