崩壊するデザイン
「継ぎ足しの秘伝タレ」
創業以来、歴代のエンジニアが注ぎ足し続けてきた `style.css`。
それはもはや味が深まるどころか、誰も触れることのできない「猛毒の壺」と化しています。
- CSSファイルが5000行を超えている
- 「一番下に追加すれば動く」と教わった
- HTMLのクラス名を変えると、なぜかJavaScriptが動かなくなる
- 誰も使っていないクラス（Zombie CSS）が大量に残っているが、怖くて消せない
リファクタリング不能になる前に、焼き払って作り直すべきです。
01. グローバルの呪い
(1.5MB)
CSSの最大の特徴であり欠点は、「デフォルトですべてがグローバル（Global Scope）」であることです。
`.title` というクラスを作れば、それはサイト内の全ての `.title` に影響します。
それを防ぐために `.header .title`、`.footer .title` と詳細度を上げ始めると、泥沼の戦いが始まります。
「どこがどこに影響しているか誰もわからない」状態が、開発スピードを劇的に低下させます。
ジェンガだ。
一つ抜けば、全てが崩れる。
02. コンポーネント指向への移行
現代のフロントエンド開発では、CSSをグローバルに置くことはアンチパターンです。
VueのScoped CSS、ReactのCSS ModulesやStyled Components、あるいはTailwind CSSのように、
「スタイルをコンポーネントの中に閉じ込める（カプセル化）」技術が必須です。
影響範囲を限定できれば、変更は怖くありません。
03. 命名規則という防波堤
技術的にカプセル化できない環境（WordPressや古いjQueryサイト）なら、せめてBEM（Block Element Modifier）などの厳格な命名規則を導入すべきです。
`.menu__item--active` のように、クラス名だけで構造と状態を表す。
これは「名前空間」を作るための、先人たちの知恵です。