Recently there has been a bit of discussion about the ol' separation of content and presentation.
Most of this discussion has been spurred on after the release (and subsequent point upgrade release) of Blueprint, a most excellent CSS framework by Olav Bjørkøy (also based on the work of others) for the quick deployment of grid layouts and baseline typography.
Among the voices heard was Jeff Croft who stood up for the framework, stating that in the real world of commercial web development, it's less important to adhere strictly to keeping presentational class names out of the markup.
Where web standards and other best practices don't provide great benefits, find solutions that do.
This, in turn, started a mini-barney in the comments between himself and Jeremy Keith (which has rightly been removed), highlighting that even the web-celebs are having trouble agreeing on the issue.
What I would love to see (and please enlighten me if something like this already exists, or is planned for CSS3) is something like definable style aliases. For example, instead of having the following in your markup:
<div id="header" class="column span-2 append-1">Content...</div>
... we just could use:
<div id="header">Content...</div>
... and then define something like the following in your stylesheet:
#header {
alias: '.column', '.span-2', '.append-1';
}
This way you could keep the extraneous presentation-related classes out of the mark up and associate them to meaningful identifiers or classes in the stylesheet where they belong. From what I can gather, the problem most people have with the likes of Blueprint is not with having class names based on presentation, but the fact that they get all mixed up with the markup.
Comments on this post have been closed. If you would like to contact me about this post or for any reason, please get in touch.
Fixing stuttering audio with Bluetooth headphones on Windows…
Just call me Nostradamus
New mouse: Logitech MX Master
22 August, 2007 at 19:02 pm
Well web-celebs are people too. In fact I would take a lot of what they say with a pinch of salt as they really only know as much as we do. They are riding on the same train, heading in the same unknown direction :)
The use of defined alias to some extend was proposed on the WHATWG list (IIRC) and is similar to John Allslop's concept of design (web) patterns. Which is topic I have great deal of interest in.
However I can point to lots of in the wild cases daily in which we need to separate the id style rules and apply a layers class cascade of rules for a comment design element over multiple pages etc. Its a nice idea however. A simple starting point would be to get all the headers, footers, columns and content on the grid named the same from a universal context.
Blueprint has lots of good points as it brings together a lot of good ideas and techniques into one framework. Still I can't see it being applied commerically with out some degree of personalisation.
24 August, 2007 at 10:54 am
I really like that alias idea - would definitely remove the drudgery of having to constantly add CSS rules with multiple selectors.
On a slightly related note, I would love to see a way in CSS to define your own color names as well. So I could do something like:
@color: borderColor=#ccc;
and then constantly use "borderColor" in my CSS rules:
.panel { border: 1px solid "borderColor"; }
(with quote delimiters, since I imagine parsing arbritrarily defined color names like that could be perplexing)
24 August, 2007 at 17:12 pm
@Gary: Yeah, I guess you're right. Its a little hard not to hold certain web celebs in a higher regard, especially when you've been looking up to them throughout your career, learning from their blogs and listening to them speak at conferences, etc.
I've read John Allsop's post about web patterns, and it also interests me a little (along with microformats). This would be quite useful when creating your own style frameworks and starting points, but I'm not too sure about creating some kind of universal rule-set for everyone to follow. However, it would definitely be useful to have a global vocabulary to define the elements of a web design. I remember back in the day, when flash intros were all the go shudder we had a demo movie that showed all the animation techniques we used (eg. wavy text, splashing text, typewriter, tile-fade, etc.) so we had a way to discuss with clients what they were actually after, and also with other members of the team on the project.
As for Blueprint being applied commercially, I agree. I've already used it on a project, but by the time I was finished with it, I'd customised the number of columns and their widths, the container width, as well as some of the typography. (<a href="http://www.kematzy.com/blueprint-generator/index.php" rel="nofollow">This tool</a> made it a bit easier at first...). I didn't practically use much of what it offered. Because it was just a small site, it didn't really save me much time, although I guess the real test will come soon enough.
24 August, 2007 at 17:24 pm
@Trav: I like that idea. Like setting variables that could mean one thing or another. I'm guessing quote delimiters wouldn't be enough. It would have to be something like php where you could use the variable wherever you like, such as:
<code>@define { $bordthickness: "1px"; $bordstyle: "solid"; $bordcol: "#fc0"; $lightcol: "#fffffe"; }
.box { border: $bordthickness $bordstyle $bordcol; background-color: $lightcol; }</code>
Come to think of it, I suppose if we're going to go that direction, we might as well just use php to generate our CSS files. I suppose this way would make it server-independent though.
26 September, 2007 at 23:17 pm
[...] for designer types. This new methodology, along with the new CSS3 selectors module, makes the selector alias theory I had the other week kinda redundant, as markup will no longer require any reference to where the content fits in the [...]
2 July, 2008 at 14:10 pm
[...] a post I wrote almost a year ago (and in the ensuing comments), I pondered the possibility of someday being able to define variables [...]