Astroコンポーネントのstyleはどこに書くべきか

方法

• .astro ファイルの中に <style> タグで書く
• 外部 .css ファイルを使う

結論

個人的に .astro ファイル内にスタイルを書くのが良さそう

.astro ファイルの中に <style> タグで書く

メリット

• スコープ付き（scoped styles）：他のコンポーネントに影響しない
• コンポーネントとスタイルが同じ場所で完結 → 保守しやすい
• 小〜中規模プロジェクトに最適

外部 .css ファイルを使う

メリット

• 再利用性が高い（複数のコンポーネントで同じ CSS を使いたいとき）
• 大規模なスタイル整理に向いてる

デメリット

• スコープされないので、グローバルに影響が出やすい
• コンポーネントとスタイルが分離して、可読性がやや下がる

補足

Scoped Style の仕組み

Astro の.astro ファイル内で <style> を書くと、自動的にスコープされる。 つまりクラス名の後ろにランダムなハッシュが付与されて、他とバッティングしないようになってる。

<!-- 出力イメージ -->
<button class="btn astro-ABC123">Click</button>