Switching CSS to use asset pipeline in Rails?

Question

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?

Answer 1

that is actually a pretty good question. i just know of one tool called wraith that takes screenshots of your page and compares diffs them. that allows for regression testing of your design. you will need to have a test for every page though.

if you look into your browser you also have the possibility to see which css selectors are not used. you could start by deleting the styles that are not used throughout your page.

i think that you will have to take the bitter pill and refactor your css bit by bit. sass and scss might help you with that.

at some point it might be better to start of with a clean slate though. just start with one page and create the css from scratch. at least you know how it has to look like...