CSSが効かない原因、9割はこの3つ

結論：9割はこの3つ

この順番で確認すれば、ほぼ特定できる。

OS	操作
Windows	`Ctrl + Shift + R`
Mac	`Cmd + Shift + R`

**これで直ったらキャッシュが原因。**終了。

本番環境でキャッシュが残る場合は、CSSファイル名に?v=2を付ける。

打ち消し線 = 「他のルールに負けている」

同じ強さなら、後に書いた方が勝つ。

/* 負けている */
.button { color: red; }

/* 勝っているセレクタを確認して、それより強くする */
.container .button { color: red; }

**!importantは最終手段。**乱用するとどこも上書きできなくなる。

HTMLからクラス名をコピー → CSSファイル内で検索（Ctrl+F）。

ヒットしなければtypo確定。

1文字違いは目視で見つけにくい。必ずコピペ検索する。

「なぜか効かない」と30分悩んだ結果、原因は全角スペースだった。

/* 全角スペースが入っていた */
.button {
　color: red;  /* ←ここ */
}

エディタによっては見た目で区別できない。疑わしいときは行を消して打ち直す。

外部ライブラリの上書きだけ。自分のCSSに!importantを連発するのは設計の敗北。

□ スーパーリロードした？
□ DevToolsで打ち消し線を確認した？
□ クラス名をコピペ検索した？
□ 全角スペースが混入していない？

この4つで解決しないケースは稀。