Grow your CSS skills. Land your dream job.

What Are The Benefits of Using a CSS Framework?

Published by Chris Coyier

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.

Comments

  1. I agree with you. I have never used CSS frameworks, and I probably never will. It’s just a hassle trying to learn what the class names are for the framework and it often produces bloated code that you don’t need in the first place. The only thing I include that’s common for all my projects is Eric Meyer’s CSS reset (even for small sites). I like to write my own code.

  2. Jeff McKeand
    Permalink to comment#

    I’m with John. I write all my own CSS and use Eric’s reset. BUT, I can see how a framework would be useful for someone who is learning CSS, but only after they’ve gotten their feet wet by playing around with CSS and getting their head wrapped around it a bit. A framework would’ve only confused me when I was getting started.

    Great discussions this week, CC. Keep it up!

  3. “CSS Frameworks weren’t around when I was a kid. I had to refresh the page until I got it right.”

    That’s our web horror story. I have never used one, and probably wont. I do see value for rookies though…as long as they learn from them and eventually get weened off.

  4. I’ve been approaching a sort of hybrid design in the fact I don’t use a framework per se, but like any good designer I have a really lightweight basic setup for that I use as a starting point and just build off of that.

  5. Excellent review ! I think that they are for medium or expert css users. One thing is try, they can be time savers. I build 3 frameworks Emastic, Hartija and Formy and my tips is use it for big portal sites for building templates and more complex grid structure but if you do small site just write your own CSS code. I don’t agree they are all “bloat-y”, Emastic grid.css weights less then 2kb and in the end you should delete all the CSS classes you don’t use. Using CSS Framework is probably personal decision maybe in some cases it is wise to start with some Framework and personalize for you own needs.

  6. Permalink to comment#

    Chris,
    I agree that frameworks are not for me. I learned by reading and playing around with free templates. Having my own naming system is great for me. Because it is mine and I know where everything is at.

    I also saw an article on SitePoint by two writers who began an blog called Standards Suck.
    They wrote a book called “Everything You Know About CSS is Wrong”. They try to make the point that CSS is cumbersome and using CSS tables, which is not supported most older browsers, should be used. Among other things. Now I thought we were going away from tables of any kind. Now I do give credit to Site Point for hiring very talented writer and their books are very useful, BUT, with CSS and browsers the way they are, old CSS 2.1 is going to be the way to go until everyone decides to upgrade their browsers. I personally think that browsers need to auto upgrade and MS needs to kill IE6 and anything below that. Firefox 3 auto upgraded for me. It was great. And they pushed it well for the upgrade. MS, not so much, they create new products but don’t do a good job of convincing their customers to upgrade their software and browsers. Just auto-upgrade browsers. It is not a bad thing, you are not uploading bloated software, it is a new web browser. Don’t ask just do.

    CSS is much more versitile and can be very easy to learn rather than straight HTML syntax. Too much code for me. I know HTML but I hated using it because it took so long to write. Tables were just a pain.
    Granted cross browser capabilites for CSS are a pain but that is the browser’s issue not ours. I know that browser makers have their own agendas, Microsoft to name the only one. Which has refused to use the same framework as all others to allow web designers to make quality designs without a lot of extra CSS or hacks.

  7. Coda clips FTW

  8. Thanks for the answer. I have looked at frameworks in the past, but have always just coded from scratch. I feel I have enough of a custom framework to take care of most of the pros you mentioned without the cons.

    Thanks for the great article!

  9. Permalink to comment#

    Messing with the Yahoo! one was a learning experience. I still haven’t made good use of any yet. Though I reuse a lot of what I’ve done. I’m sorta developing my own framework as I go along.

  10. Never used a framework, dont know if it think its better just to get tuck in without one?

  11. Martin
    Permalink to comment#

    make a poll or something :)

  12. I have been heavily modifying CSS using the BluePrint flavour and frankly, has been invaluable to me. Also surprised how many Premium themes also use this framework. GraphPaperPress.com, Robert Ellis with his various amazing themes (usually built around Sandbox).

    So if it’s good for them, then it’s certainly good for me whilst I learn. I can look at BluePrint CSS now and visualise how it will look rather than just a load of code. Before throwing myself into it, I was having a hard time getting my head round the myriad ways authors use CSS.

    As least with a Framework, things are relatively consistent.

    But then Im a noob, and not a seasoned pro. Just saying it works for me…

    Great article by the way, although I guess I am unlikely to say it’s crap now am i. :0)

    Graham Smith

  13. Permalink to comment#

    Good post…I am just coming into learning CSS after years of manipulating tables. Frameworks definitely helped me in the beginning of this transition, but now that I have a grasp (or at least what I think is a grasp) of CSS, I find that frameworks are sort of lame.

  14. Permalink to comment#

    I’m not really a fan of frameworks either…

    I tried using the 960 grid for a bit, nothing wrong with it, the frameworks just weren’t for me.

    Good article!

  15. I use the 960 grid at the moment. not sure if i’ll stay with it. still need to make a couple more websites to see if it really saves me time or makes more trouble.

    nice read mate.

  16. I think that the better PRO of a Framework is a consistent and a shared way to build stuff. From a FOSS community point of view, this is essential to share stuff with ease.

    May be a single developer don’t look to it because, as #6 said, he knows “where everything is at”, but when other want to work over his stuff? nah, that works for single development, and Frameworks are pretty good for communities.

    A group in the Zikula Web Framework Community, are using YAML and the stuff that we share is pretty consistent, flexible and optimized to work in a balanced way.

    It’s clear that any framework has a learning curve, but after you feel confortable with it (agree with the article) and learn it, you’ll save a LOT of time!

  17. Permalink to comment#

    Don’t you think that the last problem was simply a learning curve you needed, because you had no idea about YUI? In this case the last problem does not exist in each next project you make, because you already know the problem.

    I would say the biggest problem of a framework is the size of files, especially in bigger projects, where you need to have only whats required, otherwise your customer will loose loads of unnecessary BW.

  18. I don’t find the frameworks bloaty, as I use only what I need. For example YUI. I only use reset.css, base.css and fonts.css (in that order). I don’t use the layout styles or anything. Just those 3.

  19. I just generally use my own framework since there are so many reusable bits to CSS and a lot of common styles you find yourself using from one site to the next. It just includes the basics – a reset, generic heading styles, bold class, italic class, rounded borders, left/right floats etc etc.

    Anyone who is a seasoned CSS expert will probably find themselves writing their own stuff its just too annoying using someone else s idea for a class name.

  20. Permalink to comment#

    Never used a Framework before and haven’t been able to figure out the benefit of using one really. I honestly think it would take me more time to sit down, learn a framework, and use that instead of using the coding style I’m used to that I’ve been developing for years.

    Other than a CSS reset, which I use Eric Meyer’s, I don’t see much of a use for a overly complex, bloated framework.

    Maybe I just like to code from scratch, so it myself, and know it works.

  21. Monkeytail
    Permalink to comment#

    The best framework.. is the framework you made your self (for your self)
    Frameworks are not like tailored Italian suits that fit like a glove. There mass production suits.
    When it says ‘class’.. it can’t be unique.
    Don’t learn a framework, study css.
    Substract 480 from 960..versus 12 from 24.

  22. Yeh, I’m not a fan of CSS frameworks. I’ve toyed around with them but there’s nothing like writing my own code.

    @Chris, I do use ‘container’ and all those other little convention type things, so there usually is little that needs modification… but I still like creating my own CSS.

  23. After almost 6 years Chris, do you still keep your preference?

    I’d love to see a new updated post about your view on this.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".