There could be various issues at play, but here's a neat tip for utilizing Chrome effectively.
While viewing your page with the developer tools open, try pressing and holding the reload button to access an option to clear the cache and perform a hard reload!
This feature is incredibly useful to ensure you always have the most up-to-date version while working on development projects.
Update:
Based on your situation (as per the updates provided), it seems like there might be an HTTP header issue related to your CSS file.
Take a look at the HTTP headers being sent with the response of your CSS file. If there's no cache header specified, the browser will likely attempt to cache it. During development, set an expires header in the past, and in production, set it far in the future. You can view these headers in the Network tab of your developer tools or use a tool like Fiddler to delve into your network traffic.
If adjusting the HTTP Headers proves challenging, consider setting a distant expires header, but make sure the file path changes whenever code modifications are made. Some options include:
- adding a time() stamp (always changing but not caching)
- including a version control # in the file URL (effective but requires careful management during updates)
- implementing a more complex solution that generates a pseudo path for the file, automatically updating upon any changes, maintains expected URL loading behavior, and sets cache to "forever" (up to 365 days as per HTTP specs)