What Are The Benefits of Using a CSS Framework?

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Vin Thomas sent in this question through Twitter:

What are the benefits of using a CSS framework? And would you suggest that over starting from scratch?

I was kind of dreading this one. I feel like the proper answer requires an in-depth analysis of many of the popular frameworks, and to be really thorough, actually do some projects using them so I can see how they “feel” in real usage. That makes me tired just thinking about it.

Instead of all that work (ha!), I’m going to try and get out my feelings on the subject of CSS frameworks and maybe I’ll convince myself of something before I’m done writing this. To be clear before we are start, I am talking about things like Blueprint CSS, Yahoo! Grids, logicss, YAML, etc. (Yeah there are tons more, no need to list them all, I’m sure you can google a better roundup elsewhere).

Let’s start with “the good”. Not what they promise, but what I feel like you could probably realistically gain from using a framework.

The Good

  • They can help you learn CSS. You might just literally not know how to pull off a solid multi-column layout. A framework may be a good place to get your feet wet understanding how CSS works.
  • They provide code that you just don’t need to write from scratch every time, like resets. I’ve long been a proponent that the star selector (*) margin/padding reset is a fine reset. I use it all the time. But… if you are starting a major new project that is going to be loads of pages, live for years and years, and will grow over time, you should invest right away in a more robust reset. All these frameworks start with brilliant resets that cover all the bases and will have you covered for years to come.
  • They relieve cross-browser concerns. You can’t undervalue this. We’ve all felt the burn of finding out our sites are borked in some browser or another at a hugely inopportune time. Frameworks are built to bring their magic to all browsers.
  • It helps you build good habits. Like including a print stylesheet in your projects. I always intend to build one, and I often do, but the chances are a lot higher that I do it if I have one there from the get-go.
  • They encourage grid based design. Which is a good thing. Grids don’t mean boring! They just help you achieve better readability, scanability, balance visual weight, flexibity, expandability, and just overall page page cohesiveness.
  • They come with documentation. If you need help getting started, framework generally come with some support files. This can be particularly nice if you are designing a site you will be handing off to a client. You can just let them know what framework you used and refer them to that documentation for support requests.
  • They lay groundwork. If you are using something like YUI, your life will be a lot easier if you use All-YUI-Stuff-All-The-Time. It’s built to work together and built for expandability.

The Bad

  • In order to really benefit, and actually save time, you’ll need to use one framework over and over. The all tell you that you’ll save time, but I’m thinking this is only really true once you start getting comfortable in a framework. This isn’t like upgrading your horse and buggy to a Model T where you are gonna save time getting across town the next day.
  • It changes the way you write your HTML. I’ve wrapping my websites in a div called “page-wrap” forever. Well too bad, it’s called “container” in logicss. Yeah, it’s a little thing, but I like to write markup how I like to write markup, not based around some frameworks predetermined class/ID names.
  • They can be bloat-y. There may be CSS styles set up in a framework to accommodate tons of different layouts that you’ll never use. If you are concerned about every byte of a web page, you are going to end up doing a lot of stripping away of usused code, which ruins the point of the framework.
  • They can enable clients to become dangerous. I once did a job where the client wanted everything to be done with YUI, starting with grids. I spent more time learning about YUI and trying to figure out how to stuff an already-designed Photoshop file into it than I did actually sweating the details and focusing on quality. Ultimately we got it done, but the time spent was easily tripled trying to use this framework that I can’t imagine was very useful in the end.

Well?

So I said I would probably convince myself of something while writing this. I think I have, and that just for me personally, CSS frameworks aren’t for me. I feel like all-said, CSS is a pretty simple language. I kinda like writing my own CSS. I don’t feel like a need any help and I can’t really picture any framework saving me loads of time. That’s just me though, and you should make your own call. Heck, I’m no Blue Flavor and they sure like it.