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?
4
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']
end
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. https://github.com/Huddle/PhantomFlow 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 🙂