Avoid collisions by naming asset packages

March 17, 2009 Pivotal Labs

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

Biography

More Content by Pivotal Labs
Previous
DRY, Targeted, and Reusable Testing of ActiveRecord Extensions
DRY, Targeted, and Reusable Testing of ActiveRecord Extensions

At Pivotal, we are passionate about test driven development, keeping things DRY, and writing readable and u...

Next
Pivotal Tracker wins the Jolt Award
Pivotal Tracker wins the Jolt Award

I'm very pleased to announce that Pivotal Tracker has won the coveted Jolt Award, in the Project Management...