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?
Comments
As for the debugging button you mentioned, one of the things I always liked about Homesite was that you could map keyboard shortcuts to entries in your snippet library. So create a snippet for
border:1px solid red;, and you could assign some carpal tunnel-inflaming shortcut likectrl-alt-shift-S. Nothing major, but it’s definitely something I look for in other editors.What i was going to say is that Dreamweaver has potential – DW as it could be. You already get the red boxes around DIV’s, you just need to be able to turn them on/off at your leisure, you have a decent WYSIWYG for placing things, it just needs to use CSS better.. .and render a lot better. Controlling things site wide could be possible.. if they saw it is a priority.
A worry of mine with DW is that there isn’t enough CSS page creators talking up the need for CSS support because CSS page creators use BBedit or something similar.. but really what do they need for version 8? Better CSS support all round.. it does everything else. Knowing them, it will have some whacked out feature no one uses.
I’d love to be able to use variables for things like colors. I’ve seen some articles on using PHP to write the CSS, but that seems unwieldy.
The rest of your ideas are extremely well thought-out; maybe soem software developer will read it and use your insight.
XML-Editor
CSS-Editor (CSS1,CSS2,SVG, and the Mobile Profile).
The CSS editor appears to have: Search and Filter on rules, Multiple Style Sheets editing, Tree views (showing all the current styles used).
The XML editor, several plug-ins available, including document to PDF format.
I have not tried these but remember reading about them several months ago. (Homesite user here)
Some interesting ideas, I think they will be going onto the TODO list
George
But in any editor, it would be nice to have support for the “state of the art.” On every project, I spend a lot of time looking up the latest way to do much of this.
* Generate a linked CSS1 style sheet to support Netscape 4.x.
* Automatically apply box model hack for MSIE5/Win, where necessary.
* An interface for Fahrner Image Replacement, or other CSS2 visual
hackstechniques.I can see how it would be a lot of work for a developer to make stuff like this generally-applicable and remain up-to-date.
http://www.macrabbit.com/cssedit/
Great interface, easy to use, and cheap!
geof
Honestly though, IMHO, separating your stylesheets to into two files, one for color and one for structure and formatting, would be a wiser idea than a proprietary solution.
Though not a complete solution, it is a great tool.
Cam
I’m a convert:
http://www.versiontracker.com/dyn/moreinfo/macosx/19429
Cam: I would not be able to live without firefox’s web developer. Also rely upon ieview to jump across to ie for testing.
http://www.fletcherdesignstudio.com