Proper Web Developers don't need a framework for CSS
4th February, '09
About a year ago I dismissed CSS Frameworks as a fad and and largely unnecessary. They just didn't feel right to me. I was quick to suggest that:
"Proper Web Developers don't need a framework for CSS."
Being a stubborn and arrogant Web Developer (are there any other types?) I resisted the temptation of looking into any facts to support my opinion and just dismissed them without another thought. After all, why let facts get in the way of a good opinion? Recently however lots of my colleagues, mostly PHP Developers, have been urging me to take another look.
Just before I get stuck into the merits of CSS Frameworks it would probably be wise to clear up exactly what a CSS Framework is. The odd truth is that any self respecting Developer will already be using a framework of sorts, they just will not be calling it a framework. A CSS Framework is basically a glorified set of code snippets or library which creates a baseline of default styles to build on. For example many people use a CSS reset which they use from project to project and this is an extension of that idea. In fact many of initial misconceptions came from the fact that the word 'framework' makes it sound so much more grand, and hence unnecessary, than it really is.
CSS Frameworks are bloated
Unless you are working on a very high volume site, counting kbs is not as important as it used to be. Regardless of this a common criticism is that CSS Frameworks are guilty of adding unnecessary page weight. Looking at the numbers this isn't really true. The 960.gs framework weighs in at a mere 4kb - hardly a server breaker. There is however an underlying truth to this criticism; you will most certainly be using code that you don't actually need. If you wrote the code yourself it would be marginally leaner but this advantage would be negligible. Interestingly Mark Boulton reveals that one of the major motivations for creating the Blueprint Framework was that the existing offering from Yahoo! was far too big.
Yahoo's is one of them. I've tried using it in the past, but I've really struggled. It's way too bloated (it's huge!) for my needs. According to Olav, this was one his gripes too. He's therefore created the Blueprint framework
In truth the argument that CSS Frameworks are bloated is somewhat outdated and almost irrelevant.
Stuck between the lines
A major issue is that you are constrained by the predefined dimensions of the grid you choose. Designers may be comfortable with this, so long as the constraints are made clear up front. One interesting consideration is how you deal with elements of the design that have unchangeable, awkward dimensions; traditional display advertising immediately springs to mind. If you are not working to a strict design this may not be an issue. There are lots of frameworks with lots of different grid dimensions and some frameworks can be tweaked to change the default dimensions.
Loosing control of naming conventions
The retentive purist in me worries that class names like:
class="screen-span-4 screen-prepend-1 navigation"will keep me up all night in cold sweats. I understand the "navigation" part of the previous example helps to alleviate some of the pain but phrases such as "contextually meaningless" and "poor separation of content and presentation" continue to be banded about in discussions on this topic. I just can't see this sitting comfortably with the more draconian, hardcore Front-end Web Professionals. Unquestionably using a CSS Framework will mean you loose some control over your naming conventions. As James Bennett puts it:
"It's true that a framework might not conform to your own preferred patterns or philosophies of development; it may use design patterns you don't like, or it may take a different stance on philosophical issues, and so you wouldn't feel as comfortable using it as you would with something you'd develop on your own."
This standardisation of naming conventions will however be a positive for those working in a team of two or more.
So should CSS Frameworks burn in Hell, or what?
One thing I am certain on is that using a CSS Framework is no substitute for an in depth understanding of CSS. CSS Frameworks are not suitable for every project but have their time and place. Being able to quickly prototype a site will particularly fit in well to those working in an Agile environment. I can see them being heavily misused in the wrong circumstances or abused in the wrong hands. There is certainly a significant contribution here to the way in which we approach creating grid based designs and also how we re-use CSS code from project to project.
So if you think that you have a project that is a suitable candidate for a CSS Framework you will be bewildered by the choice. There is a reasonably comprehensive list here. It looks as though the two that are leading the field are 960.gs and Blueprint. Additionally Blutrip, which is billed as "the best of Blueprint, Tripoli (hence the name), Hartija's print stylesheet, 960.gs's simplicity, and Elements' icons", looks like an interesting project and could be worth looking into.
I am definitely tempted to give a CSS Framework a chance in a suitable project, perhaps for the imminent Wallpaper* redesign. I can understand why Designers or PHP Developers will like using them but I remain unconvinced that hard-core Front End Developers will take to them in a hurry. I imagine most serious Web Developers have a set way of coding which feels comfortable to them and will continue to use code snippets such as CSS resets instead of being constrained by a defined framework. I can't help that they might be missing out.
Leave a comment
The following html tags are OK: <p> <i> <b> <blockquote> <strong> <a> <code>
Please wrap any code in <code> </code> tags.
This is Russell's personal website, a Web Developer based in London. You can email me at 
RSS Feed
Comments
Ciaran McNulty
Much as I like the idea of CSS frameworks as bundles of handy code snippets, in reality they do tend to clutter your HTML. There's a sense in the CSS/designer world that somehow class values are 'invisible' and don't clutter up HTML. This is the same philosophy that seems to think endlessly nested DIVs and SPANs don't complicate the source, just because they don't have any defined semantics.
That said, they're a good starting point for any sort of iterative development, in the same way that inline styles might be used in the early stages.
It's actually an interesting exercise to just chuck CSS into your page however you want, just to get it looking right, and then use something like Firebug to see which styles are being applied to each element and try and write a 'cleaner' CSS based on it.
4kb is nothing nowadays, especially as CSS can be marked as able to be cached for days/weeks in advance. It might be an idea for CSS framework developers to start hosting the files on their own servers, the same way that Google hosts common JS frameworks, to try and make more advantage of that sort of cross-domain caching.
February 5, 2009, 5:35 am
Phil
I'm in agreement with you.
Used appropriately, once you have learned the absolute basics of your chosen CSS framework you can knock up prototypes very very quickly - much quicker than you could build it yourself even with an in depth knowledge of CSS.
I tend to think about them as the 'scaffolding' functionality of certain frameworks (RAILS and implementations in others), in that it's something you can show a working example with very quickly, but is NOT the finished sample.
It's interesting that people worry about having 4Kb of CSS in their front end, having bits of code they'll never use, yet will willingly use a 35Mb framework (think Zend) that they'll never use 95% of. Granted, the browser will not have to download the whole framework to load components that are not to be used - but the redundant code argument still stands.
It's a bit strange that software development frameworks are greeted with often open arms, yet CSS frameworks still seem to meet fierce resistance. This is a problem in that, much like PHP frameworks, you can't see the real power it provides without using it. Some self-education (particularly on the part of the hardcore front enders) needs to take place to show that they do provide REAL value, particularly, as you suggest, in an agile environment where a page layout/design might change a fair few times within a matter of days. Re-writing your CSS and HTML from scratch every time can turn into a real chore.
CSS framework caching ala google is a great idea and is definitely something I can see happening in the near future.
February 5, 2009, 7:08 am
The Doktor
As a front end designer / developer I already have what I presume (and as Russell points out) is my own sort of CSS framework as in I have a set of generic rules I have written over time and I re-use on numerous projects to remove all margins, padding and all those sorts of everyday things you have to do over and over again on every site.
I too have been encouraged to use CSS Frameworks in the past but have always kept away from them, maybe that's wrong? I don't know? However, having done front end work for about 8 to 10 years now I just feel more comfortable using my own code.
Based on projects I have worked on in the past I feel it is faster for me to build bespoke stylesheets for projects as I know I can get the layout required by the client spot-on rather than having to learn how to manipulate a set of styles pre-written by somebody else in order to get them to do what I want or over-ride styles I don't need.
February 5, 2009, 8:39 am
CexBeekly
???? ???????
July 29, 2010, 11:19 am