Valhalla Island

In the just gone issue of A List Apart Jeff Croft wrote an article about Frameworks for designers which I think is a brilliant idea. Although I think Jeff has it a little wrong.

I’m all for abstraction in CSS files but I think Jeff is splitting up the wrong subsets. He suggests splitting files into say, grids.css and type.css. This is the opposite way I split up my individual stylesheets, a way I find that works quite well and results in a single CSS selector (hacks permitting) for each element, ID or class.

My stylesheets begin with some meta information, followed by a strong, clear comment separator. Now sections are split into site wide styles (html, body, anchors, etc), followed by sections based on the structure of the visual website that may or may not reflect the HTML. For example, header styles, will be followed by sidebar styles, followed by post styles, etc, last is often the footer styles. I see no point abstracting these sections into their own files.

Neither do I see advantage in abstracting different kinds of properties into their own stylesheets. It makes more sense to use a unique selector per selection. Separating different kinds of properties isn’t important to me but within each selector I try to group positioning properties from typographical properties, etc.

Where abstraction into separate files can be really useful is with the use of a reset style sheet and in the use of browser specific hacks. IE6 and IE7 stylesheets can be served based on conditional comments in the HTML, other browser specific hacks should also be in their own files, always included but full of rare selectors. Anything that isn’t part of the core sheet should be separated.

For the record, I don’t actually use this kind of framework yet but I am getting around to extending my general purpose template so when that’s done, you’ll be first to read an article with a link to a zip file of the HTML and CSS =)