23

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.

13 Answers 13

21

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.

2
  • It's worth noting that Dust-Me does not support checking inline stylesheets, only external ones.
    – Ben Blank
    Mar 2, 2009 at 21:20
  • 1
    There is a comment on the download page, which I quote; It NEEDS a tool to ACTUALLY clean the styles ... jclaim.sourceforge.net Start it, ... go to menu: General/Handy Tools/Clean CSS ... Feed it the file from this plug-in and your css file and it will show you a clean css file
    – Vihung
    Mar 9, 2009 at 9:45
7

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.

0
4

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.

1
  • I have Firebug and use it pretty extensively, but what I really need is something that will tell me which styles are just dumb. For example setting the font-style and color on every single class. I know this is dumb, but I am looking for a quicker way to get at this information.
    – Josh
    Sep 22, 2008 at 11:23
3

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

2

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

1
  • Not sure why this was voted down... that program looks pretty awesome!
    – Josh
    Oct 15, 2010 at 3:58
2

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.

1

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.

1

My attempt at playing around with Less for .NET.

1
1

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.

0

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.

0

EditCSS for firefox is amazing.

1
  • Looks interesting, but what can I do with this that I can't do with FireBug
    – Josh
    Sep 22, 2008 at 11:31
0

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.

0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.