タグ:
分割例
reset.css / normalize.css | ブラウザの初期スタイルをリセット 必須。すべてのプロジェクトで使う |
| base.css | body, h1~h6, a, p などの基本スタイルサイト全体に共通する基本ルール |
| layout.css | グリッドやカラム、余白など、全体レイアウト ヘッダー、メイン、フッターなどの位置指定 |
| utility.css | margin/padding/width などの小さな補助クラス tailwindのように再利用できる細かいクラスが多い場合 |
| theme.css | 色、フォント、ボーダーなどのテーマ設定 複数テーマ(ライト/ダーク)を切り替えたいとき |
| home.css | トップページ用のスタイル トップだけ特別な装飾が多い場合 |
| about.css | 会社概要など 固有の要素が多いページ |
| contact.css | お問い合わせページ用 フォームなど他と独立している場合 |
| header.css / footer.css | ヘッダー/フッターのロゴ、ナビなど サイト共通で使われるヘッダーやフッターがある場合 |
| button.css | ボタンのバリエーション 複数ページに共通するスタイルの場合 |
| card.css | 商品カードやニュースなどのUI部品 コンポーネントを使い回す場合 |