Treading Lightly with CSS Frameworks


Are Frameworks the way?

There has been a bit of discussion of late with respect to CSS frameworks, Jeff Croft floated it on a . There has been some attention on the recently introduced Blueprint CSS framework. Blueprint presents an easy to use and customisable grid system, with allowances for a full CSS reset and relative font sizes. All good things to have. However can we take this just a little to far. Clearly server side systems as pointed out by Jonathan Christopher can and do take great advantage of frameworks to enhance and speed up the development cycle. But do we really need a framework in the developmental sense, is it the best way to approach Front End development.

I can see the point of aspects of the Blueprint CSS framework being of a benefit. Eric Meyer’s Reset Reloaded, separation of the structural frame of the css, from the typography. However it is the grid section that I just can’t see the point of. Okay the YUI grid is interesting and has some nice aspects. Maybe it’s just the methods I apply that is stopping me seeing the need for such a method.


I use a series of CSS templates along with XHTML files as a basis for any site design. These have in them all the common elements, of various types (vcard, vevent, vreview and the like), plus other standard presentation objects. A few JavaScript libraries, unobtrusive Flash implementations and menu system library are all included in these templates. They are bit like the ultimate snippets code pile. As I build a site I just remove the elements I don’t require. They have all been tested to work together so an average there isn’t any real problems.

Okay it’s not the most perfect situation, but from a rapid development view it does work. It leverages the degree of reusability of the code. Yes, that is right, I don’t hand code every site from scratch, I make the most of previously styled objects and presentation wrappers and just re-skin them as required. I have always been of the opinion that is what CSS is for. Maybe I am using a framework in a loose sense of the word, but I tend to think of it as a templating system.

Is this a good thing

However this segmentation of the code base into various mini files, has benefits and drawbacks too. On the whole they are handy to work with, but very can add some real load to a server with the extra http request per page view. So how far do you go with the segmentation. You can break it up into :

  • structure
  • typography
  • design presentation (images, backgrounds, borders)

Or do you go further and take it the next step.

  • structure
  • typography
  • design presentation
  • specialist sections (eg menus, navigation)
  • print
  • mobile web
  • tweaks (mostly old style browser hacks)
  • browser specific workarounds (via IE conditional statement)

What about removing the white space as well (yeah maybe thats a little over the top).Do you think it’s worth compressing a CSS file like we are seeing with JavaScript libraries?

Personally the best way to approach any technique is to consider it’s elements and how well they can be applied to the design methodology and procedures that you have in place.

What do you do? Do you take techniques such as this and just adopt them, because “they” know better than you do. Or do you question the wisdom and only take what you need.

Technorati Tags: , , , , ,


  1. I’m doing RailsRumble at the moment and used Blueprint to setup a basis quickly and easily – I personally feel it makes a world of a difference when your in a situation that involves rapid prototyping – I mean, I would of taken ages other wise to get anything near to what I had in 1 hour.

    On the idea of going further – I think for some aspects, it can be useful – e.g. uni-form where standardizing the form markup. I find it helps give you something consistent to work with, even if its only the for the sake of development (and not for accessibility of others, even though thats important ;))

  2. @sutto That’s how I use my templates, all the basic layout and presentational elements are in place. Cuts hours of the time required for building a site. There is a grid, but not in the form as in Blueprint. You could even just standardise the elements and in doing so make them standards and accessibility compliant.

  3. We had a long discussion about this in the office today and it seems that unbeknown to us we are already using an in-house CSS framework or as you put it templated system – simply borne out of requiring a common standards based approach in building the CSS for sites using the single platform (the EdukaCMS) our collective agreement was a CSS framework is good but you need make sure it is used by all team members in all projects for it to work..

  4. I, too, save time on builds by using a basic ‘templating’ system that I have refined over the years.

    What I find with a lot of these frameworks is that they try to be ‘all things to all people’, which leads to using more code than is necessary, so I tend to spend quite a bit of time actually removing unnecessary CSS and XHTML and rewriting.

Comments are now closed, move along, nothing to see here.