ITCSSへの適用¶

ITCSSを利用中のプロジェクトに、StrataCSSの原則を適用する方法を説明します。

概要¶

ITCSSの逆三角形（詳細度が増していく階層）は、そのまま @layer の宣言順にできます。
ITCSSが規律で守ってきた概念的な階層構造を、@layer が仕様として守るようになります。

また、StrataCSSの分類の多く（Generic / Elements / Settings / Tools）は、ITCSS由来です。（標準の名称と定義 の「名称の由来」を参照）

既知の逆三角形のメンタルモデルを、@layer の仕様に接地させます。

図解： ITCSS: Scalable and Maintainable CSS Architecture を参考に作成

三角形をレイヤー宣言に置き換える¶

ITCSSの階層は、「Settings → Tools → Generic → Elements → Objects → Components → Utilities」です。このうち、CSSを出力する層だけを、三角形の上から順に並べて宣言します。

@layer generic, elements, objects, components, utilities;

後続するファイル読み込みは次のようになります。

@import "./generic/index.css" layer(generic);
@import "./elements/index.css" layer(elements);
/* 以降 objects , components , utilities も同様 */

@use "sass:meta";

@layer generic {
    @include meta.load-css("./generic/");
}
@layer elements {
    @include meta.load-css("./elements/");
}
/* 以降 objects , components , utilities も同様 */

ITCSSの上書きルール「三角形の下の層ほど強い」は、レイヤー宣言の「後方ほど強い」と一致します。

これまでITCSSでは、この構造を「詳細度を増加方向に保つ」「読み込み順を守る」というコーディング規律で維持してきました。@layer の導入後は、レイヤーをまたぐ上書きは宣言順だけで決まるため、層をまたいだ詳細度の管理は不要になります（同一レイヤー内は従来どおり詳細度で決まります）。

出力を持たない層（Settings / Tools）¶

Settings と Tools はCSSを出力しないため、@layer の宣言には登場しません。
そのままディレクトリ化するか、必要に応じて abstracts/ でまとめます。

📁 styles/
├─ 📁 abstracts/
│  ├─ 📁 settings/   # Sass変数の定義
│  └─ 📁 tools/      # Mixinと関数の管理
...

StrataCSSの Abstracts の内部構成は、ITCSSの名称をそのまま採用しているため、改名は不要です。ディレクトリの移動だけで対応が完了します。

標準構成とのすり合わせ¶

適用にあたって、判断が必要になる点をまとめます。

Trumps → Utilities¶

初期のITCSSで Trumps（切り札）と呼ばれていた層は、現在の解説記事（2016年初出・2021年更新）では Utilities の名称が使われています。
@layer では最後に宣言した層が最も強くなるため、「切り札」の役割が宣言順にそのまま現れます。

Objects の扱い¶

OOCSS由来の Objects（構造パターン）は、StrataCSSの標準構成にはありません。
維持するか、Componentsへ統合するかを検討できます。

Layout 相当の層が無い¶

ITCSSには、ヘッダーやフッターの枠組みを扱う専用の層がありません（Objects や Components で扱うのが慣例です）。
分離したい場合は、Layout などの分類の追加を検討してください。

スコープの軸が無い¶

ITCSSもFLOCSSと同様に、影響範囲（全域／ページ個別）の軸を持ちません。
ページ個別CSSの分離については、独自設計 › スコープ分離を採用する を参照してください。

注意点｜Utilities と !important¶

ITCSS作者（Harry Roberts）の CSS Guidelines では、ユーティリティ類での先制的（proactive）な !important 使用を許容しています。

@layer の導入後は、この運用を用途別に見直せます。

一方で、複数のレイヤーで !important を使う場合は注意が必要です。
詳細は「!important 利用の注意点」をご確認ください。

対応表（参照用）¶

対応をまとめると次のようになります。

次のステップ¶

FLOCSSとITCSS、2つの手法で同じ手順を見ました。
次は、この手順を独自に構築する方法について説明します。

構造を独自に設計する