Why does rolling up javascript or css in rails screw with the layout?

Question

On a few occasions now when I've moved from development to staging, I've been bitten by how JavaScript and stylesheets change their behaviour when rolled up into a single file.

For example, I'm trying to keep the series of stylesheets modular and small for maintainability, like so:

  <%= stylesheet_link_tag "reset-fonts-grid.css", "typography.css", "layout.css", "cms.css", "cms.about.css", "cms.legal.css", "comments.css", "user_generated_content.css", "overlay.css", "login_page.css", "flag_for_admin.css", 'patch.css', 'nag_guide.css', :cache => "cache/all" %>

The works fine in development, when you're more concerned with debugging than counting http requests.

But as soon as I move to a production environment or set caching to be on in config/environments/development.rb like below, the layouts break:

config.action_controller.perform_caching = false

What's going on here, and why would a concatenated file behave differently to series of smaller requests like this, and how can I fix this?

As an aside, how much of a difference does the number of http requests actually make on page, compared to file size?

Answer 1

Does your CSS validate? I have had problems in the past similar to yours which were caused by small errors that I found with validation.

Try http://jigsaw.w3.org/css-validator/

Answer 2

Out of interest, does it work if you change your :cache option so that it doesn't include a forward slash? For example:

<%= stylesheet_link_tag "reset-fonts-grid.css", ..., :cache => "foo" %>

• What does the HTML link element look like that Rails is generating for your combined stylesheet?

Answer 3

If you want to dig into the details of how the styles are being applied in the concatenated vs. the non-concatenated situation, you can install the FireBug plugin for Firefox. Then maybe open up two browser windows, one with the page in dev and one in production and use FireBug to isolate one DOM element that's giving you trouble and compare the calculated CSS attributes for that element in the two different situations.

The latest version of Safari has a built-in tool that is very similar to FireBug.

Is it possible that Rails is concatenating the CSS files in an incorrect order? Seems unlikely, but perhaps there's a bug in Rails. Take a look at the concatenated file and check the order. If they're out of order, you could create one master CSS file and include the others with @include statements. That would ensure that they're read in the correct order.