タグ:
分割例
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部品 コンポーネントを使い回す場合 |