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" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/nav.css?1234567890" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/blog.css?1234567890" media="screen" rel="stylesheet" type="text/css" />
But this:
<%= stylesheet_link_tag "main", "nav", "blog", :cache => true %>
produces:
<link href="/stylesheets/all.css?1234567890" 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" 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.
About the Author
