最終兵器の乱用
「!important」
「CSSが効かないから、とりあえず付けとこう」。
その軽い気持ちが、CSSの詳細度戦争（Specificity Wars）を引き起こします。
焦土と化したスタイルシートには、もう誰も何も建てられません。
- CSSファイル内で「important」を検索すると、100件以上ヒットする
- 「!important」を上書きするために、さらに強いセレクタで「!important」している
- スタイルを修正するたびに、意図しない場所のデザインが崩れる
- 「CSSは怖いから触りたくない」とチームメンバーが言っている
もはや解くことはできず、破壊するしかありません。
01. 秩序なき力
`!important` はCSSにおける「核兵器」です。
全てのルールを無視してスタイルを強制適用する強力な力を持っていますが、その代償として「秩序」を破壊します。
一度使えば、それより強いルールを作るために、また `!important` を使うしかなくなります。
こうして、誰も制御不能なスパイラルが始まります。
理（cascading）に従え。
02. 詳細度（Specificity）の理解
CSSが効かない理由は「詳細度」にあります。
IDセレクタ、クラスセレクタ、タグセレクタの点数計算を理解すれば、`!important` なしでスタイルを当てることができます。
「計算して勝つ」のがエンジニアの仕事です。「力でねじ伏せる」のは暴徒の仕事です。
03. CSS設計の導入
BEMやFLOCSSなどのCSS設計思想を導入し、詳細度を均一に保ちましょう。
全ての要素をシングルクラス（詳細度10）でスタイリングすれば、戦争は起きません。
平和なスタイルシートこそが、長期的なメンテナンスを保証します。