ファイル構成：ITCSSと7-1パターン

プロジェクトが大きくなると、1つのCSSファイルでは管理できなくなります。ファイルを整理する構造を使うと、CSSを論理的なレイヤーに分割し、正しい順序で読み込めるようにするとともに、必要な場所を見つけやすくできます。

ITCSSは、詳細度が高くなる順にCSSをレイヤーへ整理します。逆三角形のように、最も幅広い（最も汎用的な）ルールを上部に置き、最も詳細なルールを下部に置きます。これにより、自然なカスケードが保たれます。

ITCSSの7つのレイヤー（最も汎用的なものから順に）は次のとおりです。

1. 設定 — 変数とデザイントークン
2. ツール — ミックスインと関数
3. 汎用 — リセット／ノーマライズ
4. 要素 — HTML要素の基本スタイル
5. オブジェクト — レイアウトの抽象化（装飾なし）
6. コンポーネント — UIコンポーネント
7. ユーティリティ — 上書きとヘルパー。ここでは !important を使用できます

一般的なITCSSのファイル構成です。

7-1パターンでは、すべてをインポートする1つのメインファイルと、7つのフォルダーにSassを整理します。

• abstracts/ — 変数、関数、ミックスイン
• base/ — リセット、タイポグラフィ、基本要素
• components/ — ボタン、カード、モーダル
• layout/ — ヘッダー、フッター、サイドバー、グリッド
• pages/ — ページ固有のスタイル
• themes/ — 複数のテーマ
• vendors/ — サードパーティ製CSS

メインの main.scss ですべてのパーシャルを順番にインポートします。

最新のCSSの @layer は、プリプロセッサーなしでITCSSと同じカスケード順序の利点を提供します。レイヤーは一度宣言すると、ソースコード上の順序に関係なく優先順位が固定されます。

スタイルファイルを一元管理する代わりに、コンポーネントのCSSをコンポーネントファイルの隣に配置する方法もあります。CSS ModulesやCSS-in-JSを使うReact／Vueプロジェクトで一般的です。

Sassのパーシャルファイルはアンダースコア（_button.scss）で始めます。アンダースコアは、そのファイルを単独ではコンパイルせず、メインファイルにインポートする必要があることをSassに伝えます。

Sassを使わない場合は、@importプラグインを備えたPostCSS、または @layer と組み合わせたネイティブCSSの @import によって、プリプロセッサーなしで同じファイル整理を実現できます。

ITCSS、7-1、コロケーションのいずれを使う場合でも、各コンポーネントには専用のファイルを用意してください。スタイルを適用するコンポーネントにちなんでファイル名を付けます：_card.scss、button.css、Nav.module.css。

ITCSSで、逆三角形の最上部（最も幅広く、最も詳細度が低い位置）にあるレイヤーはどれですか。

ITCSSは、カスケードに従ってCSSレイヤーを汎用的なものから詳細なものへ並べます。7-1パターンでは、Sassを7つのフォルダーに整理し、1つのメインファイルからインポートします。最新のCSSの @layer は、同じカスケード制御をネイティブに提供します。一元管理でもコロケーションでも、重要な原則は、コンポーネントごとに1つのファイルを用意し、インポートの順序を一貫させることです。