CSS Refactoring Best Practice

Question

we are working on a large web application with Rails for quite a while and produced a lot of css for our templates. Stylesheet definitions are organised in a bunch of css files that have grown with the project. As people are not always as disciplined as they should be, it seems to me that a lot of definitions have become deprecated and useless.

Is there an (semi-)automatic way to get rid of this stuff? How do you identify useless css in your project?

Answer 1

You can use the Dust-Me Selector s plugin for Firefox or the CSS redundancy checker .

Both are great tools that I use often and they save you hours of searching and deleting.

Another tool worth making note of also is the CSS Tidy open source project. This minifies your CSS, especially useful in these cases when you have a huge site with a huge CSS file :)

---

I believe the sourcecode for the CSS Redundancy checker can be found here . Ran it through the JSLint plugin at jsFiddle.net but gave me some errors, saved it for everyone here .

Answer 2

Not exactly a 'rails' solution but you don't always need one. I use the Dust-Me Selectors firefox plugin to find unused selectors. Works for me.

edit: kyle beat me to it

Answer 3

We didn't have a particularly large CSS file (about 3500 lines) and we found it sufficient to grep the codebase for each selector. (Obviously this can be semi-automated with shell pipes, xargs and friends).

Following this process, we ended up deleting a few too many CSS styles, thanks to some of our CSS style names being dynamically generated (a bad idea in retrospect).

For more detail about our workflow and results, I co-wrote a few thousand words about our experience turning the CSS from a Rails 2.x app into an asset pipeline ready, responsive and modular Rails 4.2.x SASS setup.

CSS Refactoring: From append-only to modular CSS