CSS "Normalizer" tool?

Question

I need to maintain & improve an existing website and I am drowning in the redundancy I have discovered in its CSS stylesheet. Given the existing redundancy and non-methodlogical ordering of elements, it's hard to track and predict how a minor change will propagate through the system, or where to apply a change to achieve a certain effect, without spending a lot of time re-learning the CSS file and experimenting.

I have been using the latest Firebug and "Web Developer" add-ons for Firefox, but clearly they are not sufficient for me. I need a tool that can tell me where redundant "overrides" are and perhaps suggest a better cascading scheme.

In other words, help me generate the shortest CSS file that provides the same exact visual functionality that I have right now.

To further clarify, I am not looking for a tool that replaces "#000000" with "#000", "0.5em" with ".5em", "white" with "#FFF", etc. (this addresses "number of characters" redundancy, but doesn't address the "cascading logic" redundancy). I am looking for a tool that can tell me, for example, that a "font-size: 10px" attribute of a child element is redundant because it is already inherited from its parent.

A more advanced feature: "color: #000000" attribute of a class or an id is redundant because it is not used in any of the HTML/PHP files on the website.

Is there a tool that does this kind of "normalization" automatically?

Answer 1

You can try YUI Compressor. Works for CSS and Javascript files.

Answer 2

You can try out CSS Tidy (online version). It will reduce redundancy, optionally convert to shorthand styles, and can be used to create minified output and pretty/formatted output.

Answer 3

I'm not aware of such a tool and looking at the complexity of CSS, I'm not even sure it is possible to solve this (some CSS styles are just there to whack older browsers into compliance). So how much value does a tool have that creates a new W3C-compliant CSS which doesn't render on most browsers because of bugs?

That said, you should have a look at Envjs which allows you to read a web page in an emulated browser and then examine the result. Not perfect but might get you started.

Answer 4

Check out SASS, it's a CSS compiler with its own language and syntax, but it has CSS import capability. http://sass-lang.com/

I wonder if just an import/export cycle would do the trick for you?

Edit: Looks like an import/export cycle isn't enough, but SASS provides you with facilities to make your life easier while refactoring.

Answer 5

I think you are looking for the holy grail of CSS. I don't think it exists. The problem being that you never know exactly what the browser is going to render and need in your stylesheet. I have used Dust-me Selectors plugin for Firefox to help locate unused styles, but to automatically do it is a tall task.

That said, I think that using a framework like SASS (as already mentioned) or LESS is a round-about answer to your question. The frameworks eliminate a lot of the redundancy and and make your CSS compact. I like LESS over SASS because of the similarities to CSS.

Answer 6

Aaron makes a good point about the complexity. For example, such a tool would need access to not only the CSS files, but also the HTML (it wouldn't be able to determine things like inheritance, otherwise). Are you then looking for something that will spider an entire site and take every page into account, or can the markup be provided from files?

It's also likely that such a tool would produce CSS that is less maintainable than a decent web designer would produce (I'm thinking shortening selectors which may then just need to be 're-lengthened' at a later date). That's no problem if this is just a temporary action, but I wondering why you would need to do this in the first place.

Answer 7

For finding duplicate/unused/unnecessary CSS based on your markup, you can try out WARI, or Dust-Me Selectors (as @Aaron D mentioned), or CSS Crunch. The last two are browser extensions (for Firefox and IE, respectively), which will only look at one page, while WARI is intended to look at an entire site. However, I've not had much luck getting WARI to work.