Do you use a CSS framework to optimize your CSS and make sure it is valid standards compliant CSS?

One of the biggest battles that web developers face is trying to create web sites that will look great on a variety of browsers. The creation of CSS standards is an admirable attempt to make this easier for future browsers. But, what about current browsers or ‹shudder› legacy browsers? Adding CSS code to make a web page work as well in IE 6 as it works in Firefox 3 can do  two things. It adds additional load to your web page and it can ruin your standards validation.  What is a web designer to do?

TidyCSS

Decisions need to be made that will balance the concerns regarding aesthetics, file size, browser compatibility and standards. I am big on making decisions based on information and CSS Tidy can help give you that information. The online version is easy to use,  you can simply copy and paste your CSS code into the form field, select your CSS options and click the Process button. Tidy CSS will tell you the changes that it made and display the optimized CSS. It will also indicate the percentage of optimization. A  copy link is provided so you can copy it to your clipboard and replace your prior CSS. I recommend that you back up your original css in case there are any problems, but I find this tool to be pretty reliable.

BlueprintCSS takes a different approach. This is a modular framework  for a grid based layout that you download. It comes with a series of optimized style sheets that work together including a forms style sheet and a stylesheet specific to IE. You use these style sheets as your framework and build upon it. Nettuts  provides a Blueprint CSS tutorial to help you understand the modular framework.

Example of 960 Grid

960 Grid System is
another CSS grid framework. This one comes with grid templates for Photoshop, Fireworks, Visio, and OmniGraffle, as well as CSS and demo HTML. This is a popular framework for WordPress theme developers. Read why WooThemes use 960 GS to design their WordPress themes.

960 GS comes with a 12 and 16 column version as well as fluid and elastic options. Columnar grids are divided into common web design dimensions but all templates are for a 960 pixel wide design. NetTuts has a tutorial and video about 960 GS.

This has been a small sample of the CSS Frameworks tools available. Read more about CSS Frameworks at About Web Design, NetTuts, Noupe, Smashing Magazine, Specky Boys. Share your own stories here about your experiences with CSS Frameworks.