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.