CSS Frameworks: Pros and Cons

by on 12th November 2009 with 27 Comments

screenshot

A prefab CSS framework can be a great help or serious hindrance. This article will give proper coverage to both sides of the fence by looking at common arguments for and against using a CSS framework.

What is a CSS Framework?

CSS frameworks are meant to speed up and simplify the development of complex websites. In order to accomplish this feat, CSS frameworks contain predefined libraries of code that contain a ton of options for you to use in your HTML. For instance, grid-based frameworks usually contain several classes that are a set number of pixels wide to make it easy to create multi-columned layouts.

5 Popular CSS Frameworks

Here’s a short list of popular CSS frameworks along with brief descriptions straight from the source.

Blueprint CSS

“Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.”

Elements

“Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient. Elements goes beyond being just a framework, it’s its own project workflow.It has everything you need to complete your project, which makes you and your clients happy. Read the Overview for more information.”

YUI 2: Grids CSS

“The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.”

Logic CSS

“The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates..”

Elastic CSS

“A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.”

Pros

When used properly, frameworks can be immensely helpful in streamlining your layout process. Here are some of the biggest benefits.

Cross-Browser Functionality

This is one of the biggest selling points in my book. Coding complex layouts that remain consistent across browsers can be a nightmare. Most CSS frameworks do the heavy lifting for you so your content displays exactly the same no matter who is viewing it.

Speedy Development

If you build a lot of websites, a good CSS framework can help you create a plug and play workflow that eliminates the repetitive tasks (such as manual resets) that you go through each time you begin to setup a site. Many frameworks even include pre-styled buttons, text, etc. which can be a big time saver on the creative end.

Consistency

CSS frameworks give you a standard set of selectors that you can use across all the sites you build, forcing you into consistency in your coding. This means when you go back and look at a site you made a year ago, it makes as much sense to you as if you wrote it yesterday.

Clean, Symmetrical Layouts

If you’re like me, you’re prone to just eyeball your proportions and call it good. Many CSS frameworks set you up on a strict grid-based system that ensures your layouts attain pixel perfect symmetry without complicated measurements.

Cons

Now that we’ve done plenty of bragging on the benefits of CSS frameworks, let’s take a look at the downside. Keep in mind these aren’t necessarily minor issues but major hurdles that keep many developers away from frameworks altogether.

Extra Code

I like my code to be clear and concise without any redundancy or unused sections. With CSS frameworks, this goes out the window. Even if your favorite framework offers neatly written code, chances you won’t use half of it on a given site. This is because frameworks intentionally include lots of code for multiple layout scenarios. You pick and choose which selectors you want to use and the others just sit unused. Grant it, you could sift through all the code and delete anything you aren’t using but that can take time and therefore kill the rapid-development aspect.

Lack of Freedom

Using a CSS framework can easily lock you into a very narrow way of doing things. Don’t get me wrong, structure is a necessity, but creatively exploring new structures and ways of doing things is a great exercise for developers that keeps us learning. This process can be inhibited by a rigid framework that gets you into the habit of turning of the creative side of your brain and go for quantity over quality. There will always be a place for organic design structures that break away from the norm and blaze their own usability trail.

Forced Semantic Changes

If you’re an experienced developer, you probably have many preferred HTML and CSS elements and selectors. Using a CSS framework forces you to adopt a new system that can be uncomfortable at first. The learning curve isn’t too steep but it can be annoying if you are set in your ways.

Closing Thoughts

As you can see there are plenty of valid arguments either way. It really comes down to your personal workflow and preference. Let us know what you think of CSS frameworks and which ones you use.
Personally, I still really like coding from scratch (or at least from my own previous work). You can’t beat the sense of accomplishment when you build a site from the ground up. However, researching this article has inspired me to experiment with a couple of frameworks. They all seem a bit heavy on the unused code so in the end I might just end up creating my own personalized framework that suits my needs a bit better.

Comments & Discussion

27 Comments

  • http://www.d-lists.co.uk Michael Wilson

    I’ve always felt constrained when using frameworks.

    I personally, prefer to have the freedom to write my own code but have looked into frameworks and discovered better ways to code by doing so.

    As you mention I think it’s a good idea to try and build a personal framework to work with.

  • John Attebury

    The 960 grid is a lightweight CSS framework w/ alot of flexibility.

    I did build a personal CSS framework which is still being used at my former employer. I did learn alot from that experience but really like the 960 grid.

  • Joshua Johnson

    The 960 was where I started my research, not sure why it didn’t end up in the article!

  • http://www.gauravjassal.com Gaurav

    Nice article. I have used blueprint framework for few of my project. I would rather spend most time styling the elements of my page than designing the layout. It is very useful to create the base layout and them you can add your own styles.

    I think blueprint and 960grid system are best CSS Frameworks to use in small or big projects.

  • Pingback: CSS Brigit | Pros and Cons of CSS Frameworks()

  • http://www.henrymax.com Max

    Nice article! I don´t like css fw… but o Elastic CSS is very good!

  • http://gauravmishra.com Gaurav Mishra

    i think 960.gs is the best frame work that suits all the need for most of common repeated web layout stuff and i am happy with it.

  • http://mindboxstudios.com Chris Costanza

    I used to use webassist products quite a bit, but ran into all the “cons” that you mentioned. They were very helpful as I was a newbie, but don’t use them anymore. Good article.

  • Sean

    I used a framework in the past, didn’t really like it.

    Over the course of time I have certain things I always do when I start coding a project, so I guess I have my own framework.

  • David Hucklesby

    Very good, fair summary.

    Personally I have found frameworks extremely useful – but I don’t actually use one. Instead I have studied over a dozen and come up with my own. While mine is by no means comprehensive– just a starting point for a new site– it saves me no end of work.

  • http://www.devwords.com Ben

    I recently made a wordpress theme with the Blueprint framework and I was really impressed. It took about 20 minutes, if that, to learn how it all worked. And the actual development was really quick.

    I would highly recommend Blueprint. I’ve also used 960 but it wasn’t as good. They all pretty much achive the same thing though, it’s down to preferance.

  • http://elasticss.com sgarza

    Hey thanks for mention Elastic CSS Framework in you article.

    Any question you have, you can post them in our google group page, we will be pleased to help you

  • Joshua Johnson

    Thanks for all the comments and feedback guys! It’s great to hear your thoughts.

  • Pingback: Descubrimientos del 15 Noviembre 2009 | Blog de unique3w()

  • http://www.petrosdimitriadis.com Petros Dimitriadis

    Its good to try any new framework but in the case that you have built loads of websites you come to a point where you want to use your own.

    I use my copy and paste code and in all my websites the reset.css by Mayer.

  • Pingback: CSS FrameWorks : les pour et les contre | bertrandkeller()

  • Pingback: Weekly Web Roundup: The Coding Edition #25 | Hi, I'm Grace Smith()

  • Pingback: 12 Killer Tips for Designing in the Browser | Design Shack()

  • Pingback: 12 советов по созданию макетов в браузере « Pico()

  • http://www.sharedshares.com Shared Sh.

    I’ve been following meta frameworks for months. As a designer who does my own HTML and CSS coding, I am excited about variables and mix-ins. But I simply do no understand the Ruby part or the PHP part or simply–how to get started using a meta framework. Seems like all the sites (Less and Compass included) assume a higher level of programming knowledge.
    When I asked other designers about it on DCTH (design chat Twitter hours) no one knew what I was talking about.
    Looks like there’s a need for a plain-speaking geek to bridge the gap between design and CSS development! ;-)

  • Pingback: CSS Frameworklerinin Artıları ve Eksileri | Seo Danışma()

  • http://www.angieslist.com Mellisa

    CSS Fireworks was very necessary for me in the beginning. I’ll admit — no, I like a little more freedom. Just a personal preference.

  • http://www.cheapleafletprinters.com Cheap Printing

    They are trying to develop their language all the time so you can’t blame them for that.

  • http://www.clemensplainer.com Clemens Plainer

    As you mentioned, it’s great to be able to use YOUR way of coding, and YOUR elements and sector. It doesn’t make any difference if that element’s called #wrapper or #container. But for me it does ;-)

  • http://www.google.com Nelly

    This is the most informed writing I’ve ever seen on this subject.

  • http://www.nbdso45eytfd.net Harriett Brinkmeyer

    I’d must verify with you here. Which isn’t one thing I often do! I get pleasure from reading a post that can make people think. Additionally, thanks for permitting me to comment!

  • http://www.bestpaintsprayers.us/ Click Here

    CSS Fireworks was very necessary for me in the beginning. I’ll admit — no, I like a little more freedom. Just a personal preference.

Subscribe
Membership
About the Author