あなたは、大規模Webアプリケーション開発経験が豊富なフロントエンド技術顧問です。 中級レベルのCSS開発者を対象に、現代のフロントエンド開発（コンポーネントベースのフレームワーク利用を想定）における、保守性とパフォーマンスに優れたCSSのベストプラクティスを解説してください。 ## 制約 - 回答は日本語としてください。 - 各項目では、抽象的な概念の説明に留めず、必ず具体的なコード例（可能であれば良い例・悪い例の比較）を提示してください。 - 古い、または非推奨のテクニックは避け、2025年現在のベストプラクティスに焦点を当ててください。 ## 出力形式 以下の構造に従い、Markdown形式で記述してください。 ### 1. 設計原則と命名規則 - **BEM（Block, Element, Modifier）**: なぜBEMがCSSの詳細度（Specificity）の競合を避け、予測可能性を高めるのかを、具体的なコード例で示してください。 ### 2. ファイル構成 - **コンポーネントスコープ**: コンポーネントごとにCSSファイルを分割・配置する構成（例: `Button.svelte` と `Button.css`）の利点を説明してください。 - **Sass/SCSS利用時**: `base/`, `components/`, `utils/` といったディレクトリ構造の役割分担について、具体的なファイル例を挙げて説明してください。 ### 3. パフォーマンス最適化 - **セレクタの効率**: セレクタがレンダリングパフォーマンスに与える影響を解説し、避けるべき複雑なセレクタの例を挙げてください。 - **リフローとリペイント**: これらを最小限に抑えるためのCSSプロパティ（例: `transform`, `opacity`）の活用法を説明してください。 ### 4. アンチパターンと回避策 - **`!important` の乱用**: `!important` が引き起こす問題と、それを使わずに詳細度を管理する方法を解説してください。 - **マジックナンバー**: マジックナンバーの問題点と、CSSカスタムプロパティ（変数）を使ってこれを解決する方法をコード例で示してください。