CSS is a reasonably young technology, and taking into account the time it took browser manufacturers to adopt CSS, dedicated editors are barely in their infancy. That’s not to say the CSS editors aren’t good, however. Before I switched to using a Mac, I was a long time and fully paid up TopStyle user. TopStyle is the industry leading CSS editor, and deservedly so. (It’s also a great XHTML editor these days).

For Mac OS X, a great alternative is Western Civilization’s Style Master (also for Windows), which is another very capable tool. There are fair number of others, many of them free or shareware, and all with differing levels of capability. One thing all these tools share in common is this: they’re all focussed on editing rules.

Well, duh, you might say – editing CSS rules is the purpose of a CSS editor, right? Well yes it is – but why stop there? Working on big sites and web applications, it’s amazing how complex your style sheets can get. On a typical project I’ll have at least five style sheets and a total of a couple of thousand lines of CSS minimum. Add in style sheets for print and other situations and you’re adding another few thousand lines. None of these tools give me any way to manage my stylesheets. So what do I mean by that? Indulge me in some brief flights of fancy if you will.

When working with multiple style sheets, you may have a file for your framework layout, one for the layout of content configurations, another for purely text formatting, yet another for color variations through sections, and so on. It is quite common that a single element on the page can be affected by rules defined in a number of style sheets. When you spot a problem on the site, you don’t see it from a CSS rule point of view, but from that of the element. So given knowledge of the page with which I’m working, I’d like my CSS editor to be able to show me all the rules that apply to an element. I should be able to edit these all in one place, no matter which files they live in. It needs to have knowledge of my site and all the style sheets that exist within it.

When editing a rule, I need to be able to see all the properties and values that are being inherited through the cascade. Even without knowledge of a page, the selectors alone should give a degree of information on this. If I’m editing a rule for body #content p, it’s pretty obvious that everything defined in body #content is going to inherit, along with properties defined for body and p. I’d really like to be able to see these – perhaps grayed out at the bottom of my rule.

It may be that some editors offer this and I’ve simply not seen it, but I need control of variables. Let me define a variable of customers_foreground to be used throughout my style sheets whilst editing, but replaced out with the assigned value when saved. I’d happily tolerate meta-data files on my server to keep track of all this, but when the client comes back to me and says they need to change the color of the customers section, I need to be able to do that in one central place and have my CSS editor run through and update my style sheets for me.

I want access to some simple debugging tools without having to code them myself. A button that adds div{border:1px solid red;} to the bottom of the current style sheet would be a life-saver. A facility to look through my page and quietly suggest that might have meant .navBar and not #navBar wouldn’t go amiss either.

Once all the hard work is through, I really need something to help me document my CSS. I wouldn’t dream of writing code with no documentation, yet CSS seems to slip through the net. Surely an editor should be able to help me construct useful comments for my code – the selectors give away so much information about what’s going on, even though they can be baffling to the human mind – especially when out of context.

So, that’s my wish list for a more intelligent CSS editor. A CSS Manager, if you will. I’m sure I’ve missed stuff off, but that’ll do for starters. What’s on your list?