[CSS].cssファイルの編集内容が環境に反映されない

はじめに

CSSはエディタやブラウザ上でエラー検出されないケースがあるので、CSSファイルの編集内容が環境に反映されないときの 最も基本的な調査観点 をまとめておこうと思います。

アプリ開発入門者向けとなりますが、エラー表示がない場合は本記事を参考にしてみてください！

調査観点

下記の基本的な事項を見落とし、時間のかかる複雑な調査をしがちなので注意！
特に括弧の過不足についてはありがちですが、盲点となりやすいです。

• コーディングミス
  • 原因のほとんどが括弧の過不足　括弧の対応関係をよく確認すること。

hoge.css

.hoge {
    display: flex;
    flex-wrap: wrap;
    max-width: 500px;
/* 閉じ括弧がない */

.fuga {
    background-color: #e9f0f6;
    color: #535353;
    font-size: .9em;
}

• 古いキャッシュを利用している
  • ブラウザキャッシュをクリアする
    
  • 開発環境のキャッシュをクリアする
    • ex)Railsならアセットキャッシュをクリアし、アセットを再コンパイル

railsスケルトン構成を使用している場合

// アセットのキャッシュをクリア
$ rails assets:clobber
// アセットを再コンパイル
$ rails assets:precompile

まとめ

エラー検出されずCSSファイルの内容が環境に反映されない場合、まずはコーディングミスまたはキャッシュが古いことを疑うと良いでしょう。それでも解決しない場合はより複雑で技術的な調査が必要です。