Are there any utilites that will help me refactor CSS

Question

I am working with some CSS that is poorly written to say the least. I am not a design/CSS expert, but I at least understand the C in CSS. While the built in CSS support inside of VS-2008 is far improved over previous versions, it still doesn't quite do what I am looking for.

I was wondering if anyone knew of a good program or utility that will help me to refactor and clean up my CSS much the way that ReSharper helps you with C#.

Some features that would be nice:

• Examine CSS files and determine ways to extract common styles like font-style, color, etc...
• Possible plugin to VS-2008 would be awesome!
• Examine markup files and make some suggestions on improving the current use of classes and styles.

Answer 1

Firebug is a very good Firefox extension that allows you to examine which CSS declarations are active for which DOM element in your document tree.

Although it does not make any suggestions for improvements, it's a great help when debugging/simplifying CSS code by hand.

The Web Developer extension is also a great help.

Answer 2

TopStyle is popular and always the one I hear recommended. It has recommendations on styles etc.

I use Aptana but this doesn't do an refactoring just flags up errors and allows you to target certain browsers. Using this a a decent CSS book may help.

Answer 3

If you're using ASP.NET 2.0, there's ReFactor! for ASP.NET

Answer 4

I like Expression Web's CSS facilities. But it doesn't do much for minimizing or unifying your CSS. You have to understand how CSS works to use it properly.

Answer 5

The Dust-Me Selectors Firefox extension can scan a website and tell you what CSS is used and what is not. Removing unused CSS is one good first step in refactoring.

I have often found that when some section is removed from a website, the HTML is removed but the CSS is not.

Answer 6

EditCSS for firefox is amazing.

Answer 7

I've had good luck using Stylizer in the past. It's nicer and only costs 1/6 of TopStyle.

Answer 8

I used to use WestCiv's StyleMaster, which is a pretty good CSS editor / inspector / debugger app. Combine that with the afforementioned Firebug, and you can't help but stay on top of your CSS.

Answer 9

This site at least helps to sort and minimize your rules: http://www.cleancss.com/
It doesn't get you to where you want to be, but it's a good first step.

Answer 10

Maybe CssTidy or CssOptimiser can help to clean-up and make smaller

Answer 11

There's a Ruby gem called HAML that ships with an executable called css2sass. That executable translates CSS into SASS, which is a metalanguage on top of CSS that makes it much easier to refactor (by better illustrating the relationships among your selectors). Might be worth taking a look.

Answer 12

My attempt at playing around with Less for .NET.