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 builtin 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 know of a good program or utility that will help me to refactor and clean up my CSS like what ReSharper allows to do with C#.

Some features that would be nice to have:

• Examine CSS files and determine ways to extract common styles like font-style, color, etc...
• 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

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 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

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 4

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

Answer 5

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

Answer 6

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 7

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 8

My attempt at playing around with Less for .NET.

Answer 9

I might be a little late but the ReSharper 6 early access preview (EAP) does this for you!

In a CSS file, entering "#" will auto-complete every ID from your project. Same with a period "." to list all your classes.

Best part: when you rename the selector it will rename it project-wide. It makes refactoring CSS much faster, if not pleasurable.

Answer 10

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 11

EditCSS for firefox is amazing.

Answer 12

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 13

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