CSS開発ガイドライン

コア原則

• セマンティックなHTMLを記述してアクセシビリティとSEOを向上させる
• インラインスタイルを避けてCSSでスタイリングする
• メディアクエリとフレキシブルレイアウトを使用してレスポンシブデザインを実現する
• インラインまたは埋め込みスタイルより外部スタイルシートを優先する

レイアウト技法

Flexbox

• 1次元レイアウト（行または列）にはFlexboxを使用する
• justify-contentとalign-itemsをアラインメントに活用する
• flex-wrapでレスポンシブなラッピング動作を実現する
• 一貫性のある間隔のためにマージンよりgapプロパティを優先する

Grid

• 2次元レイアウトにはCSS Gridを使用する
• grid-template-columnsとgrid-template-rowsでグリッドテンプレートを定義する
• grid-areaで名前付きテンプレート領域を使用する
• auto-fitとauto-fillを活用してレスポンシブグリッドを実現する

ユニットとタイポグラフィ

• タイポグラフィにはremユニットを使用してユーザー設定を尊重する
• コンポーネント相対サイジングにはemユニットを使用する
• フォントサイズにpxを使用しない。ボーダーと固定要素用に取っておく
• 必要に応じてclamp()で流動的なタイポグラフィを実装する
• ビューポートユニット（vw、vh）は全画面レイアウトで慎重に使用する

CSSカスタムプロパティ（CSS変数）

• :rootでデザイントークンをCSS変数として定義する
• 色、スペーシング、タイポグラフィ、シャドウに変数を使用する
• 異なるコンテキストで変数をオーバーライドしてテーマ機能を実装する
• セマンティックに変数を命名する（例：--color-primary、--spacing-md）

命名規則

BEM方法論

• Block: スタンドアロンコンポーネント（例：.card）
• Element: Blockの一部（例：.card__title）
• Modifier: BlockまたはElementのバリエーション（例：.card--featured）

ベストプラクティス

• クラス名に小文字とハイフンを使用する
• IDをスタイリングに使用しない。JavaScript フックに取っておく
• 単一クラスセレクタを使用して詳細度を低く保つ
• コンフリクトを防ぐためにスタイルをコンポーネントでスコープする

詳細度管理

• 可能な限り詳細度を0-1-0（単一クラス）に保つ
• !important宣言を避ける
• 偶然ではなく意図的にカスケードを使用する
• 詳細度制御のためにCSS Layers（@layer）を検討する

レスポンシブデザイン

• モバイルファーストのメディアクエリを実装する
• フレキシブルレイアウトに相対ユニットを使用する
• 複数のビューポートサイズでテストする
• コンポーネントレベルの応答性にコンテナクエリを検討する

パフォーマンス

• セレクタの複雑さを最小化する
• 深くネストされたセレクタを避ける
• 効率的なセレクタを使用する（要素より クラス）
• コンポーネント分離のためにCSS containmentを活用する
• ファーストビュー表示領域に必要なクリティカルCSSを検討する

モダンCSS機能

• 比率を維持するためにaspect-ratioを使用する
• FlexboxとGridでgapを活用する
• 論理プロパティを使用する（margin-inline、padding-block）
• transitionプロパティでスムーズなトランジションを実装する
• 機能検出に@supportsを使用する

構成

• スタイルシートを論理的に構成する（base、layout、components、utilities）
• ファイルはモジュール化して焦点を絞った状態に保つ
• 複雑なスタイルはコメントで文書化する
• 宣言内で一貫性のあるプロパティ順を使用する

ブラウザ互換性

• 必要に応じてベンダープレフィックスを使用する（Autoprefixerを検討）
• ターゲットブラウザ全体でテストする
• 新しい機能のフォールバックを提供する
• プログレッシブエンハンスメントアプローチを使用する

アクセシビリティ

• 十分な色コントラストを確保する（WCAG AA最小基準）
• キーボードナビゲーション用に表示されたフォーカススタイルを提供する
• スクリーンリーダーに影響する方法でコンテンツを非表示にしない
• アニメーションにprefers-reduced-motionメディアクエリを使用する