考え方と原則¶
StrataCSSの関心事は、「予測しやすく、破綻しにくく、スケールしやすい基盤」を整えることです。
具体的な課題は「CSSをどのように管理するか」であり、プレフィックスを含むクラス命名規則や、CSSプロパティの記述に関する規則は含みません。
原則を中心とするため、最終的なルールは制作者自身（設計者）が定めます。
3つの原則をもとに設計します。
3つの原則¶
StrataCSSが定める原則は次の通りです。
- Scoping ： ページのスコープ（影響範囲）を定義・可視化する
- Layering ： CSSの階層構造と @layer を定義する
- Aligning ： 同じ言葉で「分類・構造・仕様」を一致させる
原則とは「土台となる基本的な考え方」であり、設計を行う際の指針となるものです。
以下、順に説明します。
1．Scoping： ページのスコープを分離する¶
CSSが影響するページの範囲を次の2つに分類します。
- サイト全域（Globalスコープ） … 全てのページで読み込むCSS
- ページ個別（Pagesスコープ）… 必要なページのみで読み込むCSS
従来から現場でおこなわれてきた手法を原則に引き上げ、ディレクトリで分けて管理することで、影響範囲を見た目で識別できるようにします。
位置づけ： 任意 ― プロジェクト特性により採用を判断
2．Layering： CSSの階層構造と @layer を定義する¶
多くのCSS設計手法が定義しているような、 base layout components などの「CSS分類」を定めます。そして、これらを階層化して「概念的なレイヤー構造」を定義します。
概念的なレイヤーとは、MCSSやITCSSが定める階層構造と上書きのルールと同義です。
このレイヤーに @layer を適用することで、概念と仕様を一致させます。
位置づけ： 構成要件 ― この手法の前提（外すと @layer 管理が成立しない）
3．Aligning： 同じ言葉で「分類・構造・仕様」を一致させる¶
「CSS分類の定義」、「ディレクトリ構造」、「 @layer の仕様」の3つは「同じ言葉」を利用します。 設計が変わっても一貫性を持たせることで、予測しやすい状態を維持します。
例）分類「Components」→ ディレクトリ components/ → @layer components
位置づけ： 推奨規律 ― 設計時に守ると予測可能性が得られる
StrataCSSの効果¶
上記3つの原則により、以下の効果を得られます。
- 影響範囲が読める → 「全体か / ページ個別か」が分かり、変更しやすくなる
- 衝突しにくい →
@layerで上書き順が決まり、詳細度競争が起きにくくなる - 混乱しない → 1つの分類名から、ディレクトリも
@layerも辿りやすくなる
これらが合わさることで、分類の変更や増減をおこなっても、「予測しやすく、破綻しにくく、スケールしやすい」基盤になります。
次のステップ¶
次は、これらの原則をもとに、どのように実装に結びつけるかを説明します。