Division of zen-classic.css

As seems to be the case with a lot of themers, I smiled at what Zen tries to do, then got annoyed at having to 'un-theme' the default theme. A simpler way to get a more bare-bones Zen, without throwing out the existing CSS altogether, would be greatly appreciated. There's also a few 'best practice' things I'd like to see introduced into Zen.

What I propose is breaking up zen-classic.css (previously zen.css) into 3 separate CSS files: zen-typography, zen-layout, and zen-presentation. Zen-typography deals primarily with fonts and font sizes, especially the stuff that helps ensure even sizing/scaling across browsers. Zen-layout is for creating the overall skeletal structure of the layout - header sizes, columns, margins, etc. Zen-presentation is for the chrome - things like color schemes and background images.

I've put together a version of Zen using these divisions, based on the Nov. 8th dev snapshot. You can download it at http://www.toejob.org/junk/zen-split.tgz

With this division, the most basic customization would be done in zen-presentation. A lot of users only want to change the color scheme and add their own logo. They can change a few values in zen-presentation and not have to worry about any of the others. Changes made here also have the least chance of breaking things, a boon to newbies. If coded to the same standard, zen-presentation files would be easily interchangeable. The result would be something like Winamp 2 skins, where everything is in the same place no matter what, but the appearance can change significantly. Not the ultimate in customization, but for a lot of people that's all they need. Meanwhile, a more experienced themer could simply remove the default contents of zen-presentation and have most of their un-theming work done in one stroke.

Advanced themers will be more comfortable hacking away at at zen-layout, getting down and dirty with the box model, floats, and fun things like that. Zen-layout files could potentially be interchangeable too, but would be more likely to require changes elsewhere. As an idea for down the road, I wonder if some type of layout mix-in system could be created. As a simple example, changing between fixed and fluid widths, without having to link yet another CSS file from the HTML.

Zen-typography would probably be the most universally-used of these three files. It's always good to have a common baseline for fonts across browsers, and the rest is mostly trivial edits.

The divisions between typographical, layout, and presentation are not always clear-cut. Like whether links are underlined or not, is that typography or presentation? As such, my current divisions are not necessarily perfect. The biggest question mark for me was margin and padding applied to elements that are normally a single line of text, like <h1>. Normally, margin and padding are placed in zen-layout, but on elements like this it functions more akin to line-height, and typically doesn't impact the overall layout structure. As such, I placed them in zen-typography instead. I could still be convinced to put them in zen-layout, though.

But things like that are just details, and this is just a draft. For the moment, I'm more interested in what people think of the idea in general. Probably the biggest drawback is just in having more stylesheets to deal with, especially when trying to determine where a particular value comes from. Still, you'll be aided by knowing the logic of the divisions. If you want to change something from being float: left to float: right, you know that it's probably going to be in zen-layout.css. And since each file is smaller, there's less code for you to have to scan over. A theme author would still be free to create their own theme that doesn't use any of these CSS files, or pick and choose from them. Of course, there will also be subthemes not based on zen-classic at all, but still there's sure to be plenty of zen-classic derivatives, so why not instill some good habits here?