At the time of writing it seems as though every month another new CSS framework is published. They should neither be dismissed as ‘flavour of the month’, nor as being too complicated to write one’s self. The principle behind them is very sound and, if well-written, they have many benefits, not least saving time. Further more, writing your own will help you improve your coding. Here I examine the benefits of CSS frameworks, ask whether it makes sense to use one, and whether it’s worth writing on of your own.

Definition

First of all, what is the definition of a CSS framework? A CSS framework is a library styles that provide ready made building blocks for the front end of a website. This should allow for faster production and testing of a website.

Advantages

Reduced production and testing time.

Drawbacks

Complexity and bloated code, i.e. an amount of code that’s not relevant to the site being built.

Starting point

For some time I’ve been splitting CSS up into 2 stylesheets, ’structure’ for the main page structure and ‘typography’ for text styles and page details. This approach kind of worked for smaller sites, but could still result in unwieldy style documents. In a previous job I was part of a team that built a page templating system. For this we split the styles into many sheets. Upon reflection we neither divided styles up in an optimal fashion nor take the opportunity to address modularity of layout. Subsequent to that we built a templating system that allowed sites to be endlessly re-branded. Here we got closer to creating a sensible framework, but still did not address modularity. At about the same time as we were working on that, frameworks were being widely published. Quickly understanding the benefits of going one stage further, I decided to experiment as soon as a good opportunity arose.

Do they really save time?

Absolutely. Even though, at the time of writing, my own framework is not fully developed, it’s saving hours, possibly days on each project. A side benefit has been that, as part of the process. I’ve started to collect, document and modularise snippets of code, which has in it’s self sped up my coding.

Using an existing framework vs writing your own

With their currently being in excess of 20 frameworks being offered freely, should you adopt one, or use your own? That depends on your needs. Having already started to develop my own, I become involved in a project that required one. We look at several before writing our own. We did so both because we could write something that met our needs, and because we confident in doing so.

If you are inclined to start writing your own framework, there are a huge number of tutorials and other resources out there. Likewise, if you are thinking of utilising an existing framework there is much assistance available.

Part two will look at writing the CSS.

Resources

A great starting point is this Nettuts article – Which css grid framework should you use for web design.