ファイル管理

コンポーネント内の @keyframes

コンポーネント固有のアニメーションは、そのコンポーネントの SCSS ファイル内に定義します。

@keyframes は CSS 仕様上グローバルスコープになるため、Block 名を含めて命名し衝突を避けます。

配置ルール

• ファイル末尾にまとめて配置
• ルート直下に置く（@media / @layer などの内側は不可）

命名ルール

• {block}-{action} または {block}-{element}-{action}
• action は短く明確に（動詞句）

例:

.sample-block {
  animation: sample-block-fade-in 0.3s ease;
}

// ファイル末尾に配置
@keyframes sample-block-fade-in {
  to {
    opacity: 1;
  }
}

共有アニメーション（グローバル層）

複数コンポーネントで共通のアニメーションはグローバル層で管理します。

• kf- などの prefix を付け、keyframes.scss に集約
• import は @styles/partials/keyframes のように alias 経由で

@rel コメント

Block 間の親子関係をコメントで明示し、ファイル間をたどれるようにします。

親 Block

@use "sass:meta";

// @assets/css/home.scss          ← ページエントリ

.home-section {
  @include meta.load-css("scss");

  > .home-hero {
    // @rel/scss/home-hero.scss   ← 子 Block へのリンク
  }
}

子 Block

// @rel/../home-section.scss      ← 親 Block へのリンク

.home-hero {
  // ...
}

ページエントリ

.main-container {
  > .home-section {
    // @components/home-section/home-section.scss
  }
}

ルール

• 親 → 子: > .child ルール内の先頭コメントに子 Block へのリンク
• 子 → 親: ファイル先頭付近に親 Block へのリンク
• 親 → ページ: ファイル先頭付近にページエントリへのリンク