Handy utility for CSS editing

I’ve been doing some SharePoint UI customization work recently, and if you’ve ever done any of that, you know how much fun it is to work with some gigantic CSS files.

I was talking to Dave last week and lamenting that the CSS specification doesn’t include support for the specification of constants.

Here’s the problem with developing CSS files: most of the time, there are a pretty small number of actual values that you’re using, but they’re being specified in a number of different classes. For example, you may have a few different base colors, four or six different accent colors, a font or two, some images, etc., but it’s a pretty short list. Then you take those handful of values and smear them across a bunch of different class definitions in the CSS — and if you’re doing SharePoint customization it’s a ridiculous number of classes. Once you’ve gotten into the process a little bit, it becomes a jumble of classes and CSS attributes — was that the outer container for the toolbar? Or was it the actual toolbar buttons? Or the links on the toolbar? And which shade of blue was that?

Which is why I threw together this utility.

CSSX (CSS XML helper — if you have a better thought for a name, help me out) is a command line utility that basically creates a constant capability for CSS.

For example, this is what a class definition typically looks like in CSS:

This utility allows you to edit your CSS file to look like this:

You then specify values for each of the variables within brackets in an XML file. The command line utility merges the information from the XML file with the CSS template and emits a standard CSS file.

The XML file looks like this:

(Note that the ZIP file includes a copy of this file.)