So that we’re all on the same page, let’s agree—at least for the duration of this article—on this definition of “framework”: a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around. Generally speaking, this is the approach taken by the aforementioned JavaScript and web application frameworks.

To be clear, we’re not necessarily talking about something that is built, packaged, and released to the public. Rather, a framework may be solely for you or your team.

A framework for designers

Chances are, you can benefit from a similar abstraction of CSS code for your web design process. Those who can benefit most are designers who work on several sites of a similar nature. Additionally, designers working on a team with other designers have a lot to gain from a framework approach. For example, I work for a newspaper company, and all of the 20+ sites in our stable have a lot in common. Simply by virtue of being news sites, they tend to be more similar than they are different. But, even a solo web designer who works on projects which are all quite different on the surface can probably find pieces that are suitable for abstraction into a general-purpose CSS framework.

At the Lawrence Journal-World, where I work, we’ve recently built a CSS framework and found it to be a huge efficiency booster. Sure, it took us a few days to create the framework itself, but once that was done, the speed at which we can put together quality page designs is tremendous. What’s more, since every designer on the team is now using the same framework, when one goes to make edits to another team member’s work, they don’t have to spend 20 minutes trying to understand why things were built the way they were. They can just dive right in.

What sorts of things can be abstracted?

When you jump into putting together a CSS framework, you’ll want to look for things that you tend to do over and over again on every project. The goal is to consolidate these things into one central location, following the Don’t Repeat Yourself (DRY) coding methodology. This makes maintenance a lot easier, and can also save on bandwidth costs.

A few things I account for in the CSS of almost every single project I work on are:

    * A “mass reset” of default browser styles. For example, setting margin and padding to 0 on all elements, turning off borders on framesets and images, etc.
    * Aligning the type to a consistent baseline. This includes things like setting the margins on block level elements like paragraphs, headers, and lists to the same value as (or some multiple of) the base line-height setting for the site.
    * Creating basic styles for forms.
    * Creating a few CSS classes I always use, such as .hide (where I set the display value to none) and .mute (which I set to a smaller type size and sometimes a lighter color).

Read more