CSS レイヤー
プロジェクト全体の CSS を以下の 3 層に分けます。
| レイヤー | 役割 |
|---|---|
| グローバル層 | サイト全体の設定値・関数・Mixin・ユーティリティ |
| ページ層 | ページごとのエントリ CSS（コンポーネントの配置） |
| コンポーネント層 | Block / Element + Variant / State による部品設計 |
グローバル層
サイト全体で共有する設定値・関数・Mixin・リセット・ユーティリティを担当します。
共通パーシャルは Stylelint の
ignoreFilesで除外し、共有 keyframes は検証対象に含めます。
詳細はこちら: Stylelint 設定。
役割別ファイル構成
| カテゴリ | ファイル | 役割 |
|---|---|---|
| 設定値 | variables.scss, global/config.scss | カラー・タイポグラフィ・スペーシング・ブレークポイント |
| 関数・Mixin | global/function.scss, global/mixin.scss | 数値変換・メディアクエリ生成など |
| 基本スタイル | reset.scss, base.scss, print.scss | リセット・要素スタイル・印刷用 |
| ユーティリティ | utilities.scss | .u-hidden, .u-sr-only など単機能クラス |
| 共有アニメーション | keyframes.scss | 複数コンポーネントで使う @keyframes（kf- prefix） |
ユーティリティクラス
構造やスキンに依存しない単機能クラスを限定的に定義します。
u-プレフィックス必須（例:.u-hidden,.u-sr-only）- Block / Element の構造ルール（2 語 / 1 語）とは別カテゴリ
- サイト全体で再利用される最小限にとどめる
共有アニメーション
複数コンポーネントで使う @keyframes は keyframes.scss に集約します。
kf-などの prefix を付けて命名- ルート直下に配置（
@media/@layer内は不可）
コンポーネント固有の
@keyframesは各コンポーネントの SCSS 内に定義します。
詳細は ファイル管理 を参照。
ページ層
各ページのエントリ SCSS です（例: home.scss, about.scss）。
役割
- コンポーネントの読み込み（
@use） - ページのルートクラス（
.main-containerなど）で子 Block を配置 - ページ固有の余白・背景など
担当範囲
| 担当する | 担当しない |
|---|---|
| コンポーネントの読み込み・配置 | コンポーネント内部のスタイル |
| Block 間の余白調整 | Block 内部のレイアウト |
ページ層は読み込んだコンポーネントの配置が中心。ページ層でクラスを書く場合も Block/Element の基本ルールに従い、読み込んだコンポーネント内部は触らない。
コード例
@use "@styles/partials/global" as *;@use "@components/hero/hero-container";
.main-container { > .hero-container { // @components/hero/hero-container.scss margin-top: 0; }}繰り返すページ構造は
components/parts/に共通コンポーネントとして切り出します。
ページ層のルートクラス（
.main-containerなど）は 1 Block = 1 ファイルの対象外です。各ページのエントリ SCSS 内で完結させます。
コンポーネント層
Block / Element による構造設計、Variant / State による見た目と状態の分離、SCSS のセクション構成、ファイル管理を一貫したルールで整理します。
- Block（2 語）: 部品そのもの（例:
.hero-container） - Element（1 語）: Block 内の要素（例:
.title） - Variant / State: data 属性（デフォルト）または class モードで表現
- 1 Block = 1 ファイル: 各 Block は 1 つの SCSS ファイルと対応
- @keyframes: Block 固有のものは各コンポーネント SCSS のルート直下・末尾に配置する
詳細は コンポーネント を参照してください。
ディレクトリ構成例
src/├── styles/ # グローバル層│ └── partials/│ ├── global/│ │ ├── config.scss│ │ ├── function.scss│ │ ├── index.scss│ │ └── mixin.scss│ ├── base.scss│ ├── keyframes.scss│ ├── print.scss│ ├── reset.scss│ ├── utilities.scss│ └── variables.scss├── components/ # コンポーネント層│ ├── common/ # サイト全体で共通│ │ └── site-header/│ │ └── site-header.scss│ ├── parts/ # 複数ページで共有│ │ └── hero-banner/│ │ └── hero-banner.scss│ └── pages/ # ページ固有│ ├── home/│ │ └── home-hero/│ │ └── home-hero.scss│ └── about/│ └── about-intro/│ └── about-intro.scss└── assets/ └── css/ # ページ層 ├── home.scss └── about.scss