Imports Considered Harmful

Posted on September 26, 2007
So in your layout you have something like this:
<%= stylesheet_link_tag 'main' %>

Then in your main.css you have something like:

@import "interface.css"; /* element level style */
@import "style_class.css"; /* class level style */

The problem is—how do browsers know to request a fresh copy of the imported CSS files whenever they change. When you use Rails’ helpers, an etag gets appended on the end of the requests. (that’s the ?13232352 you see on the end of rails-generated asset URLs)

Instead of using CSS @import directives, just use the rails helpers or a system like Asset Packager to group all CSS into a single file and force a download on any css change.