The Pros And Cons Of CSS Frameworks

A coupe of weeks ago I offered some thoughts about the pros and cons for using a css reset file. Resets are really one smaller part of what you might use as a complete css framework and today I want to offer some thoughts on using frameworks.

Let’s take a look at what css frameworks are, their pros and cons, and finally some thoughts about choosing a specific framework or developing your own.

What Are CSS Frameworks?

To answer the question let’s first consider the definition of a framework in general. Here are some definitions I found.

framework (n.)

• A structure for supporting or enclosing something else, especially a skeletal support used as the basis for something being constructed.
• a real or conceptual structure intended to serve as a support or guide for the building of something that expands the structure into something useful.
• a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused.

The last one is from this A List Apart article specifically about css frameworks

Given the above we can say a framework is something that usually isn’t meant to stand alone, but is meant to provide a structure on which to build. That structure can be physical or it can be conceptual, but it serves to make building the final product quicker and easier.

In regards to css that structure will come in the form or reusable blocks of code that can be abstracted. Those blocks of code can and should be consistently improved to make them more stable and more reusable across projects.

CSS frameworks can come in different varieties. A css reset for example is a really a type of framework all it’s own. Other things css frameworks aim to build a structure for include:

• grid/general layout
• typography
• forms
• general styles
• widgets such as tabs, drop downs, buttons and other specific objects and design elements

Some frameworks build a structure for one of the above and some attempt to build structures for several or all.

If we think beyond css for a moment, most any CMS qualifies as a framework. A content management system like WordPress serves as a framework for building a complete website. If you’ve ever used a CMS you already know this. You use it because it generally makes developing a site quicker and easier.

The Pros of CSS Frameworks

CSS frameworks offer several benefits that offer reasons to use them.

• Increased productivity—Reusing a structure is more efficient than re-coding every project from scratch.
• Standardized codebase—By default frameworks lead to a standard codebase as you’re reusing the same code from project to project. This makes maintenance quicker and easier as you don’t need to relearn how you developed each site.
• Makes it easier to work with a team—Similar to the above a standard codebase makes it easier for different people to work together on the same project.
• Provides a more organized approach to css—Abstracting design patterns and code blocks forces your code to become more organized.
• Publicly released frameworks are improved by the community—Any publicly released framework has many developers using, testing, and improving it. This is more an advantage of the open source nature of publicly released frameworks.
• Fewer mistakes—Once you know a block of code or a larger pattern of code works you can safely add it to any project and know it won’t contain errors.
• Cross browser reliability—Because they need to be the structure for any number of projects, frameworks tend to work for a variety of solutions including multiple browsers.
• Can be a learning tool—If you take the time to study how a framework has been put together and think about why it was put together that way you can learn a lot.

The Cons of CSS Frameworks

Along with the benefits there are some downsides to using a css framework

• The learning curve—You’ll need to put in some time learning to use any framework. This is only a downside when you first start using the framework.
• Could inherit mistakes of framework developer—It’s always possible some mistakes aren’t corrected. If you’re simply dropping a framework into your project you’ll be dropping in both the good and bad code.
• Could lead to a lack of understanding the underlying css—This is more an issue for new css coders. Using a framework could restrict your knowledge if you treat it as a black box. Most of us learned by making mistakes with our own code.
• Bloated code—Since frameworks have to cover a multitude of different cases they often come with more code than you need for any specific project. You can always remove the code you aren’t using or minify your files.
• Might restrict you as you conform to the framework—The framework can become an arbitrary design constraint. You may find yourself designing to the framework instead of selecting the best framework for your design.
• Lack of semantic code—In abstracting the code frameworks tend not to use semantic class and id names as they can’t know specifically how the class will be used. You end up with .column-20 as opposed to .sidebar.

Choosing a Framework

I think the pros of using a framework outweigh the cons. It’s why I develop with a CMS, usually WordPress. It’s more efficient to develop using some kind of framework.

That said I think the key to using a css framework (or any framework for that matter) is not to use them blindly. Ideally you’d learn any framework well enough to understand how and when to use it.

Take the 960 Grid System. It makes the assumption that you’ll be using a fixed width layout of 960px. it allows you to quickly build a 12 column or 16 column gird in that space.

That’s great when your project calls for a 12 or 16 column 960px wide layout. It’s not so helpful if your grid will be a different overall width or use a different number of columns. In that case you either need to customize 960 or use another framework.

One question that comes up is who are css frameworks for, beginners or more advanced coders?

• Beginner—Can make it easier to code a project, but make sure to spend time learning the underlying css
• Intermediate/Advanced—Adds efficiency to your projects, but you may prefer to develop your own framework to suit your coding style

My best advice in choosing a css framework is to learn to use several instead of relying solely on one and as with css resets don’t treat them as black boxes. Choose the framework that works best with your own coding style and more importantly that works best with you current project.

And if you do use any regularly, spend some time looking through it to see if you can find a way to improve it or fix any issues you encounter and then contribute your fixes and improvements back to the framework for everyone to use.

Some Popular CSS Frameworks

Here are some popular frameworks you can look at. Keep in mind they don’t all abstract exactly the same thing or provide the exact same structure for you to build on.

• 960 Grid System
• Less Framework
• Tiny Fluid Grid
• Baseline
• Blueprint
• Elastic
• YAML
• YUI

These are hardly the only frameworks out there. You can find many more with a little searching.

Developing Your Own Framework

As useful as I think css frameworks can be, I don’t use them in my own projects. When they first started coming out I saw their cons more than I saw their pros. Over time I have come to understand their benefits, but I’ve stayed away from them and prefer to use my own.

Technically I don’t have a ready made css framework I can drop into projects. What I have is more a library of snippets for consistent patterns I use. Embarrassingly these aren’t always stored in a nice neat library either.

More recently I’ve started to get a little smarter and I’ve begun storing my snippets in a central place (I’m using a new snippet manager CodeBox, which I found in the Mac App Store) and little by little I’m building up those snippets into a framework.

Over the years I’ve developed my own standards for building a layout or a menu system and I generally prefer to stick with my own standards as opposed to those of another developer.

The learner in me also prefers to develop my own instead of using someone else’s solution. I don’t always have the time to learn everything myself, but css is something I know well already and I enjoy learning more about. To me it’s worth the time to build my own css framework.

Awhile back I posted some thoughts about how to organize a css file. I realize now what I was trying to get at in that post was how to develop a css framework and it’s something I think will be an interesting challenge and learning experience.

I wouldn’t necessarily recommend every developer build their own framework, but I am recommending it for myself and anyone else interested in the challenge and learning experience.

Summary

Like any framework, css frameworks aim to give you a solid foundation and structure on which to build. A good framework will increase development efficiency as it’s main benefit.

There can be some downsides to using a css framework if you treat them like a black box. Most of these cons are easily overcome, but you do need to be aware of them.

While beginner’s can certainly benefit from css frameworks, they’re more susceptible to some of the cons. Intermediate and advanced coders are better suited to using css frameworks as the downsides will affect them less.

As different frameworks have different strengths you may be wise to work with several as opposed to one or you may even decide it’s best to develop your own set of frameworks that better align with your projects and coding style.

Do you currently use or plan to use a css framework? If so, which one(s) and what has your experience been using a framework?

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.