コンテンツにスキップ
SpiraCSS v0.3.2-beta

コンポーネント

コンポーネント層は、SpiraCSS の 3 層アーキテクチャの中で最も詳細なルールを持つ層です。Block / Element による構造設計、Variant / State による見た目と状態の分離、SCSS のセクション構成、ファイル管理までを一貫したルールで整理します。

ファイル構成

1 Block = 1 SCSS ファイル が基本です。

article-card/
├── article-card.webc      # テンプレート
├── article-card.scss      # ルート Block
└── scss/                  # 子 Block を格納
    ├── card-header.scss
    ├── card-body.scss
    └── index.scss         # 子 Block をまとめて @use
  • テンプレート: フレームワークの命名規則に従う
  • SCSS: Block 名と同名のファイル
  • scss/: 子 Block をフラット配置し、index.scss で集約
  • トップレベル: ルート Block を起点にし、他のクラスは内側にネスト

子 Block のスコープ化

ルート Block で @include meta.load-css("scss") を呼ぶと、子 Block が親セレクタにネストして展開され、親 Block 外へスタイルが漏れません。

@use "sass:meta";


.article-card {
  @include meta.load-css("scss"); // 子 Block を展開
}

共通化したいものが出てきたら

対象範囲に応じてどこに置くか決めます：

  • 同じ親 Block 配下で使う → —shared セクションにまとめる
  • 同じページ内の複数コンポーネントで使う → components/pages/ にページ専用の共通コンポーネントを作成
  • 複数ページで使う → components/parts/ または components/common/ に独立

詳細ガイド