Sign up ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free.

I have a lot of legacy CSS files from what was a Rails 2.x app that got upgraded to Rails 3.2.8, and I want to switch over to using the Rails asset pipeline for stylesheets. The issue is, the CSS stuff is messy in terms of huge lines of code, duplicate file names, and unorganized folder structure.

After looking through individual pages, and trying to add individual stylesheets and folders into the asset pipeline and spending some cycles debugging, I realized there's probably a better approach.

Is there a way to test to make sure the old CSS matches up with the asset pipeline CSS? What are some good tools for testing and debugging CSS?

share|improve this question
Is this an opportunity to refactor and improve the CSS? – Wyatt Barnett Dec 7 '12 at 16:29
Yes, it's possible to refactor and improve the CSS. Would it be better to do this before switching to use the asset pipeline? – John Dec 9 '12 at 5:39
Well, if you are going to be heavily touching the CSS to the point you are taking on the expensive part of that process -- that is the manual QA CSS requires oftentimes -- you might as well since the costs are already sunk. – Wyatt Barnett Dec 9 '12 at 16:12
I don't understand what you mean. You can use exactly the same CSS in the Asset Pipeline. Could you please elaborate on your question? Do you want help on how to refactor your stylesheets? If so, you should give some examples on the current state. If you just want to know what to do to migrate them to Rails 3 (or 4), then simply move them to app/assets/stylesheets and change your urls to image-path, etc, and tell your app which of them should be precompiled or if you're going to concatenate all of them into a single precompiled stylesheet (best for performance). – rosenfeld Mar 10 '14 at 18:46

1 Answer 1

up vote 0 down vote accepted

Warning: You man not like this answer.

Even though rails gives you CSS file for each controller - the're not included only for this controller. If you put *= require_tree . in your application.css - the all are going to be included.

So if your legacy project used approach to include different files for different pages - ouch. There's some substantial work for you to do.

What you can do is to implement such solution in your layout:

<%= stylesheet_link_tag 'application' %>
<%- (@extra_css || []).each do |css| %>
  <link rel="stylesheet" type="text/css" href="/legacy_csses/<%= css %>" /> 
<% end %>

(I write in HAML, so this erb might need some polishing to work ;))

And in your controllers you can

def index
  @extra_css = ['one.css', 'two.css']

so you can have specific css'es per controller or action. But keep in mind those styles are not in assets pipeline. This is temporary solution. From now on you can start to refactor. You can do it one @extra_css file at a time. can be helpful, it can test your styling against reference screenshot so you can see quickly what you've messed up.

Nevertheless there's some refactoring for you to do before you can move all styles into assets pipeline. But you'll get there. It will feel good. I envy you a little :)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.