Nathan Borror

Jeff Croft http://jeffcroft.com/

Well, you already know I don't really agree with you. :) But, I'm curious -- why are semantic class names worth every penny? What do they gain you? How do the unsemantic ones negatively impact your work?

When I've tried to answer these questions myself, all I can really come up with is "semantic class names feel better to me, because books have told me I should use semantic class names." In other words, I can't actually come up with a real-world benefit to them. Can you?

Christian Metts http://mintchaos.com

As time has passed I come down in the middle. The only part of our grid system that bugs me is the span-x classes. The .units, the .blocks, the .containers and other such parts can be useful in a whole lot of cases. We design is a compromise game more than anything else. Not compromising your standards, personal or w3c is important. Getting shit done is important. Serving the user is important, serving the stockholders is important. Etc. etc. You know all this.

I still believe there is good and usefulness in our framework. It's a hammer. But it shouldn't be the only tool in the box.

Jeff Croft http://jeffcroft.com/

I still believe there is good and usefulness in our framework. It's a hammer. But it shouldn't be the only tool in the box.

I agree completely.

Blueprint changes our "unit" classname to "column." I preferred unit, and it felt more semantic. But still -- it seems to me these class names don't bother anything but my aesthetic sense. That is, they make my code a bit less pretty, but don't actually cause any real problems. I am bothered by the less pretty code, but not as much as I am excited about the speed with which I can create new layouts.

Wilson Miner http://www.wilsonminer.com/

I've gone through the same conflicts a couple of times now developing custom frameworks and I have to say I'm on the other side of the fence.

For a personal project, I would probably never use or develop a framework nearly that abstract, and I'd use bespoke styles hung on semantic class names. But on large sites with medium-to-large teams (or even small teams where the work is going to need to be handed off to other developers quickly or often) there's no replacement for a cleanly abstracted system of utility classes. Done properly, it's consistent, intuitive and documentable — all conducive to quick, practical adoption by anybody who needs to use it.

To me, it's like the difference between a bespoke suit made to fit "the right way" by one highly skilled craftsman versus a good-quality, affordable suit mass-produced and sold off the rack. Yes, the bespoke suit is ideal, and once you wear one you'll wonder how you lived with that ill-fitting junk, but not everybody can afford the real deal. And not everybody needs the real deal. So it's good that you can walk into Men's Wearhouse and buy a suit for $150 that looks better than your AC/DC t-shirt when you go on that big sales call. And you can get a "tailored" suit at Brooks Brothers for $600 for your wedding. Just like you can download a WordPress template or customize a CSS framework like Blueprint.

Don't get me wrong, I'd rather be the craftsman than working in the factory, but I don't think I'd get very far convincing Gap Inc. that they'd be better off selling my one-of-a-kind wares or my local newspaper's ad sales rep that he needs a handmade Italian wool suit.

Jeff Croft http://jeffcroft.com/

I think we all prefer the well-tailored Eurpoean suit, but we just acknowledge that there is a time and a place for the one off the rack, too. That's all. I'm definitely not suggesting that the Blueprint class names are the best way. I'm just suggesting that when you have many large sites to manage, the consistency of a framework (Blueprint or otherwise) can be more beneficial that perfect custom tailoring.

Phil Molaro http://molaro.wordpress.com/

Say what you will, but I really like the Blueprint concept for my markup. I wasn't sure I would at first, but the idea is simple enough and so is the tutorial page. After only 30 minutes of reading through everything and tinkering with my own version I was up and running.

I know a lot of designers who still don't use CSS because it scares them. They don't know where to start and they have heard there are tons of hacks needed and the whole thing pushes them back to tables and font tags. I am a firm believer that designers need to be given the rules, the boundaries of the box if you will, so they will know how to think outside of that box. Your framework does just that. It gives them a simple grid based system to start page layout (much like traditional newspaper layout). The structure of adding one class after another is a good building block system to help them see the affects of each code change.

Do I think this is a perfect framework? No not yet. But it has the basis to become a really strong CSS tool. The framework needs some built in support for designing fluid layouts. It needs better handling of image placement. It would be nice to see a sheet for mobile devices. I am sure I could think of other things to add, but the point is while it isn't perfect (yet), it has the potential to be a very powerful resource. I think you should be proud of what you helped build and I hope you all will continue to work towards future releases.

roberthahn http://blog.roberthahn.ca

There are, of course, a couple of ways to have your cake and eat it too.

If you want semantic class names, there's nothing keeping you from adding them to the list of classes.

In This posting by Mark Boulton, Simon Willison suggests that we need a CSS macro processor. He's not the first to wish for such a feature, and it is a great idea.

It may well be that the best approach here is to use Blueprint the way it's namesake implies, pair it with a CSS preprocessor (I naturally favour my approach :) ), and create a new stylesheet with semantic names equaling the aggregation of several Blueprint classes.

Peter Bowyer http://peter.mapledesign.co.uk

"Scripting languages benefit from smart frameworks, markup languages do not."

In fact one can say the markup language is the framework. It can't be smart or dumb, it's markup :)

I don't see the debate over Blueprint ending anytime soon. My feeling is with yours Nathan, but then I frequently sacrifice pragmatism for perfection. On a productivity scale, something similar to Blueprint would be useful.

Rich http://www.richardcornish.com

Nobody usually makes it this far down here, so I'm sure I'm just adding to noise, but...

I prefer a different middle ground from "all framework vs. no framework" that was only mentioned in "do what works for you." I like the reset and type stylesheets a lot, but as pointed out, the grid doesn't sell me over. I guess I speak from experience after cleaning Nathan's old code. :)

So I'll gladly take the reset and type stylesheets and adapt the grid for my own work.

P.S. Nathan, I think you missed styling ordered list sidebars on LJ (you did unordered lists), and if it wasn't for Firebug, I would have been up the creek. :)

trevor

In regards to a CSS pre-processor I've come to really appreciate Sass. The Haml/Sass developers are incredibly responsive and seem to be open to good suggestions.

http://haml.hamptoncatlin.com/docs/sass http://groups.google.com/group/haml

Brad Fults http://h3h.net/

...why are semantic class names worth every penny?

Jeff Croft

Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same. ...A warning will always remain a warning, no matter how much the look of the page changes.

Use class with semantics in mind (w3.org)

Brad Fults http://h3h.net/

Well that markup got rather twisted.

Jeff Croft http://jeffcroft.com/

Brad, you didn't really answer the question. You explained what semantic markup is (which I already understand quite well -- I've spoken at conferences on the topic before), but you didn't explain how the additional, non-semantic classnames hurt you in the real-world.

You seem to address the theoretical benefit of semantic markup: that when you redesign, or change, your site, you will only need to modify the CSS, and not the (X)HTML. But, that goes aganist my belief that 100% separation of content and presentation is a mtyh.

And, we're not talking about throwing semantics our the window, here. We're talking about adding a few semantics-agnostic class names to already semantic markup. And, we're talking about class names used on semantic elements (like headers, paragraphs, and divs).

So, I'll ask again the question no one seems to be able to answer: what real-world harm comes from adding a few extraneous class names to your already semantic markup? Remember: real-world. How does it affect the bottom line?

Because I believe it doesn't.

roberthahn http://blog.roberthahn.ca/

If at first CSS fails to do the job we need it to do, improve it.

However, it would seem that the CSS WG is rapidly moving away from relevance: http://ln.hixie.ch/?start=1181118077&count=1

Perhaps we need a WHATWG for CSS. I would love to see a better specification for CSS, and my favorite new pet feature to sneak in would be the addition of an include: attribute who's value is simply a CSS ruleset that has been earlier defined. That way I could set up something like this:

.nav { include: .unit; include: .span-7; include: .append-1; include: .last; }

and the parsing engine simply reads the logic from top to bottom.

Christian Metts http://mintchaos.com

Preprocessors still scare me. One of the things I love about Markup languages is you don't have to install anything on the server to make things work.

Veering off the CSS framework debate a bit, but the fact remains that you've already adopted preprocessing for your HTML. You don't have to install anything server side to use HTML, but you do. I do. Most people do. The benefits far outweigh the cost. Does HTML become less pure because it's generated from a database and Django's wonderful inheriting template system?

Maybe preprocessing is the answer for CSS as well. It could be kept pure in the final output while gaining a lot of power and alleviate the pain that leads to CSS "frameworks" in the first place.

Rich http://www.richardcornish.com

I spent the last hour and a half trying to making some <div>s float in a <div class="unit span-11 first">. Still trying.

Maybe it's because I wasn't around when the CSS framework was made, but now when I'm overwriting CSS I can't go more than two seconds without Firebug determining what classes and IDs I'm working with. I don't know what things are anymore, and I waste time looking it up.

Jeff may not be the best person to answer these questions because he's the one who made the framework. As someone new, it's frustrating and time consuming. Is that real world enough for anybody?

Jeff Croft http://jeffcroft.com/

Rich, if it's frustrating and time consuming, then drop it right this second. The point of a framework is to be efficient and save you time. If it doesn't do that for you, then don't bother. It does do that for me, so I'll keep using it. :)

Jeff Kenny http://www.walkjogrun.net

I know I'm a little late to the debate, but couldn't you get over the semantics issue by using unique IDs for the various elements and still use the "style-based" classnames. I know the whole point is to keep style-based naming out completely and to be intent-based, but you could meet somewhere in the middle.

In the sample site for Blueprint, there's this line:

<div class="column span-8 prepend-1 first">

but couldn't you add a semantic ID and alleviate feeling dirty? Like so:

<div id="masthead" class="column span-8 prepend-1 first">

I know its not ideal, but its a little "better" than being completely for or completely against it.

Christian Mets http://mintchaos.com/

After thinking on it for the past couple of weeks, and dealing with more legacy code from varying projects I'm siding more with you Nathan. I do like the grid bit for prototyping, but my current stance is that it should be ripped out before production. I also like using the grids for one-off pages or super-tiny sites where it doesn't really matter.

Daivd Thomson http://www.hundredthcodemonkey.com

"I'm somewhat conflicted with its release because I don't think it should be used. Don't get me wrong, it's great, but don't use it."

Don't be conflicted. Perhaps you should relearn how to trust the wider development community to take a concept and move it forward.

I agree with both sides of the argument. The grid is quick, easy and works great in a server-side script. Also, the markup is ugly, bloated and unsemantic.

But, there is no reason why you can't have your cake and eat it too. :)

My response to Blueprint can be downloaded at my site, check it out.

David Thomson http://www.hundredthcodemonkey.com

Nathan,

The main goal with it was to script an automated method of removing the "column first span-10 blah blah" classes from the markup. And, or course, the ability to change the sizes of each grid unit.

Will

I really like this idea and the comments have been very interesting to read.

I'd like to take some time to conjure up my own version of this concept because I could see it being useful for prototyping, saving time at the mockup stage, and generally experimenting with the design process. Maybe playing around with this will give birth to some other ideas...and if it doesn't, no harm has been done.

But personally, once the layout, typography, etc is decided I would go for the "tailored suit" approach and swap all the bloat for semantic code and custom css files. But that's just me. Anyway, thanks for introducing me to your ideas, always good to steal (in the sense Picasso meant!) from experienced people.

Dustbin

I am a total beginner to making website and I like blueprint css alot. From my newbie point of view:

Personally what I does with blueprint css is that. I force myself to make a habit to say for example:

div "column span-16 last" {comment} tagStructure:Main_Content {comment_close}

end div

(wrote it this way so the text get included)

forcing this habit upon myself by following {comment}Structure:Content_Type{end_comment} whenever I used blueprint css classes I won't get lost when I look at it again next time:).

Would be even nicer if we could enforce this in some way through the help of some application/script...that would scan and...

Sorry for my poor english and lack of knowledge