Astroでは、HTML・コンポーネント・スタイルをシンプルにまとめられる反面、
構成を工夫しないとプロジェクトが大きくなるほど管理が難しくなります。
ここでは、効率的にCSSを記述・運用するための考え方を整理します。
1. ページ単位よりも「コンポーネント単位」で考える
Astroの強みは、コンポーネントごとにCSSを閉じ込められる点です。
.astro ファイル内で <style> タグを使うと、デフォルトでスコープ化されるため、
他のパーツに影響を与えずにデザインできます。
ただし、すべてをローカルに書くと共通化が難しくなるため、
ボタン・ヘッダー・カードなど、再利用する要素は別コンポーネント化 して
同じCSSを何度も書かないようにします。
2. 共通スタイルはグローバルCSSでまとめる
共通の色・フォント・リセットなどは、
src/styles/style.scss などを用意して「レイアウトコンポーネント」で読み込みます。
これにより、全ページ共通のスタイルを一括管理できます。
3. ネストを深くしすぎない
Sassを使う場合、ネストが増えるほど読みやすさが落ちます。
BEM記法（Block, Element, Modifier）を意識して2〜3階層以内にとどめるのが理想です。
Astroではコンポーネント単位でスコープが効くため、
.hero .title のような長いセレクタを書かなくても済むことが多いです。
4. メディアクエリを整理して管理
スマホ・PC両方に対応する場合、
メディアクエリを各所に散らばらせるとメンテナンスが難しくなります。
または、Sass変数でブレークポイントを定義し、
どのコンポーネントでも同じ基準を使うように統一します。
5. インラインよりも外部化でパフォーマンスを保つ
AstroはデフォルトでCSSを最適化してくれますが、
大量のスタイルを各ページのインラインに書くと、
ビルド時のファイルサイズが肥大化します。
全体的な構造を「共通CSS + コンポーネントCSS」の二層構造 に分けると、
キャッシュも効きやすくなり、ビルド後のパフォーマンスも向上します。
6. 実務でよく使う整理パターン
実際の開発では、以下のように整理するとスムーズです。
src/styles/：全体のベースCSS、変数など
src/components/：各パーツごとのスタイル付きコンポーネント
src/layouts/：ページ全体で共通するレイアウト構造
public/：静的ファイル（画像・フォントなど）
この構成にしておくと、デザイン修正や他ページ追加の際も影響範囲が明確になります。
7. 命名規則はチームで統一する
複数人で開発する場合、
クラス名のルール（例：BEM、CamelCase、kebab-caseなど）を決めておくことが重要です。
CSSそのものよりも「どう書くか」のルールを明確にすることで、
作業スピードが格段に上がります。
まとめ
AstroのCSSは「スコープを活かしつつ、共通部分は外に出す」のが基本です。
構造を意識して書けば、デザイン変更にも強く、
後から読む人にもわかりやすいコードになります。
「小さなコンポーネント単位で管理し、大きな流れはレイアウトで統一する」
この考え方が、AstroでのCSSを効率化する最もシンプルな方法です。
