Tools and techniques for refactoring CSS

Question

I need to do this more generally, but a fine current example is my two menus. I have two menu classes, horizontal-menu and vertical-menu, and two sets of rules for elements like ul, li, and a under these classes. Many of these rules have things in common, like the color value for a elements. I would like to refactor the common rules and values into a 'super-class' called menu, and the have only override values in my horizontal-menu and vertical-menu classes. Is there a tool (besides the tool asking this question) that can help me with this?

Answer 1

The best tool for this kind of problem is Compass, a framework for defining rules which are then compiled into css for use in production. It allows you to define variables in much the same way as an imperative language.

It also has other helpful concepts such as mixins which allow the definition of a set of css properties which would be regularly used together, such that you can include that block of properties in multiple standard CSS rules. The power being that you can then edit that mixin in one place, changing the properties and having that change propagate to any CSS rule in which the mixin has been used.

I discovered Compass, and learnt how it should be used thanks, to a screencast by Chris Coyier at CSS Tricks

The only problem in this case (and most cases in fact) is that you really have to start from scratch with Compass, or find a way of integrating its work-flow into your existing one.