Rails has a handy feature to easily package multiple CSS or JavaScript files into a single asset. You can use the :cache option with stylesheet_link_tag or javascript_include_tag to bundle several files into a single file (requires config.action_controller.perform_caching to be set to true). This is good because it reduces page download times by eliminating the latency from multiple requests, among other things.

For example:

<%= stylesheet_link_tag "main", "nav", "blog" %>

The above snippet creates the following HTML:

<link href="/stylesheets/main.css?1234567890&48a6bc" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/nav.css?1234567890&48a6bc" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blog.css?1234567890&48a6bc" media="screen" rel="stylesheet" type="text/css" />

But this:

<%= stylesheet_link_tag "main", "nav", "blog", :cache => true %>

produces:

<link href="/stylesheets/all.css?1234567890&48a6bc" media="screen" rel="stylesheet" type="text/css" />

Using the :cache => true option packaged all those files into a single one, and generated only a single link tag to use it on the page. However, this is not exactly what you want to do. Consider this…

views/layouts/application.html.erb:

<%= stylesheet_link_tag "main", "nav", "blog", :cache => true %>

views/layouts/admin.html.erb:

<%= stylesheet_link_tag "main", "nav", "admin", :cache => true %>

It makes total sense to want to create several bundled packages of the same kind of asset. In this example, an application may have a generic user style, and a different set of styles for the admin console. But using :cache => true will get you in trouble, since each layout will try to generate an all.css file with its own set of css files. That’s why you should always use a string for the option value to give a particular name to the package file.

views/layouts/application.html.erb:

<%= stylesheet_link_tag "main", "nav", "blog", :cache => "blog_all" %>

views/layouts/admin.html.erb:

<%= stylesheet_link_tag "main", "nav", "admin", :cache => "admin_all" %>

That creates a link like:

<link href="/stylesheets/admin_all.css?1234567890&48a6bc" media="screen" rel="stylesheet" type="text/css" />

that links to blog_all.css or admin_all.css

I’ve taken to naming packages with a name like LAYOUT_all.css (where LAYOUT is the name of the layout template) to make it easy to tell what’s going on.