Glad You're Ready. Let's Get Started!

Let us know how we can contact you.

Thank you!

We'll respond shortly.

Avoid collisions by naming asset packages

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 %>


<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…


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


<%= 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.


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


<%= 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.

  1. Jon Crawford says:

    Thanks for the post.

    I personally like to put all the cached files into a folder inside public/stylesheets.

    “cached/admin” %>

    That way if I need to clear the cache real quick, I can just zap that entire folder.

    !jon – [](

  2. Chris Kennedy says:

    Why would you force the developers to create unique aliases for each combination of stylesheets rather than handle it automatically? Doesn’t seem like an elegant solution…

Post a Comment

Your Information (Name required. Email address will not be displayed with comment.)

* Copy This Password *

* Type Or Paste Password Here *