Sep 16

Don't Sweat the Unsemantic Stuff

Filed in: css frameworks semantics webdesign

Jeff has been sucked back into to the Great Framework Debate and tempted me into a blog post.

I think frameworks are a good idea and don't really get what people have against them. They generally help to solve common problems and usually use best practice solutions. This is because they are generally open-source and have the benefit of many people contributing to them and helping to eradicate any bugs. If all the people that moaned about them actually helped to contribute to them then maybe they'd be even better. I also think that when frameworks are well documented they allow people to see good quality code that they can learn from by dissecting the framework's code (I remember learning a lot about JavaScript from reading the Prototype code).

One of the main issues that people have against frameworks is the lack of semantics. This usually occurs when using grid layout parts of frameworks. This is inevitable as you need to designate a class name to do all the whizzy stuff in the background and because you can't predict what class names people will use in advance, all you can do is use some sort of generic class name ... and you might as well use one that describes what it does. So you get classes like 'three-col grid' and 'span2'. Of course, this isn't semantic - it is describing the look of the page rather than the content within. This is a heinous crime in some people's eyes, but I don't quite understand this reaction. It's not a big deal and there are really only two strategies to employ when dealing with them, depending on your outlook and time constraints.

Set 'Em then Forget 'Em

This is the path of the dark side least resistance and certainly helps if you are on a tight deadline. Frameworks help you to build up grid structures quickly by using these unsemantic class names. The simplest path to take is to just use them and then leave them there. You can always add more class names or ids that add some semantic value to the content. So if you have a section for comments that you've used a 'three-col grid' class on, give it an id of 'comments' too for some extra semantic goodness.

At the end of the day it is not that big a deal and your web pages are not going to explode if they contain some unsemantic class names. Remember they don't add any semantic value, but your page doesn't lose any semantics by having them either (especially if it is already marked up using meaningful markup).

Use 'Em then Lose 'Em

This is the path of the purist, but takes more time. You basically use the unsemantic class names while building the site to get the right look and then go through your CSS and change the declarations. So if you have a section for comments that uses a three column grid and it has a class name of 'three-col grid' go into the CSS file and copy the rules for the 'three-col and 'grid' classes into the 'comments' id, then delete all the references to 'three-col grid' in your markup and CSS.

Some might argue that it might be quicker if you know your CSS to just write the CSS straight in the 'comments' id from scratch, but I would argue that using a framework allows you to experiment with different sized grids while prototyping and then settle on the right design. When you have finished this then you can start finalising the code and losing the framework's class names for your own that are more meaningful.

I usually try to go for the second method - use 'em then lose 'em, but I don't get a sweat on about leaving a few rogue unsemantic class names hanging around. And when time is an issue, it really is a no brainer - just use them and get on with the job.

All this talk of frameworks has got me thinking again about my own framework, Sparkl. I haven't really mentioned Sparkl on this blog, mainly because I don't quite consider it finished and also because I haven't really done anything with it for a while (I've been up to other stuff). But now I've regained some motivation to do some more work on Sparkl that I'm really excited about. It deserves a post (or few) of its own, so I'll be posting here again soon about future developments. Stay tuned.

Blog Posts

Tags

Pics from Flickr

Recent

Random

Listening to

The Killers: Sam's Town

Sams Town by the Killers 5

A great follow up album to their debut, Hot Fuss. Stand out tracks are Read My Mind and Sams Town.

Relaxing Reading

Labrynth by Kate Mosse

Labrynth book cover 3

Good summer reading, very much in the mould of The Da Vinci Code (but better writing). Another search for the grail and another wierd and secretive religous group.

Geeky Reading

Bulletproof Web Design by Dan Cederholm

Bulletproof Web Design book cover 5

An essential book for any web designer. This shows you how to create common web layouts using standard based layouts and avoid tables. It looks great and is full of priceless info.