Almost every website is styled using CSS these days. This includes using (sometimes very cumbersome) techniques, while in the same situations it would've been possible to use clean code.

In this series of blogs several (unknown) techniques and best practices will be discussed. Styling your website using CSS will be as simple and efficient as possible, which results in cleaner code and better cross-browser compatibility and performance.

In this first part we'll discuss cheat sheets, reset-files and frameworks. These will make sure that when you're starting a new project, you'll actually be halfway regarding any important design decisions and your browser compatibility.

Cheat sheets

Before we start with the setting up of a solid foundation for CSS that a new website needs, we'll first have a look at something else: cheat sheets. A cheat sheet is (as the name suggests) a document on which you can 'cheat' how certain techniques are applied. This will make sure you won't be reinventing the wheel for every new project or have to spend endless hours searching Google for that 'one special selector'. Most CSS cheat sheets will discuss things like: the CSS-box-model, the CSS-selectors, pseudo-elements and the values that each of the elements accept.

Several cheat sheets

• http://www.addedbytes.com/download/css-cheat-sheet-v2/png/
• http://lesliefranke.com/files/reference/csscheatsheet.html
• http://www.pxleyes.com/blog/2010/03/most-practical-css-cheat-sheet-yet/

Reset

Every browser deals with each HTML element in its own way. For example white spaces, line-heights, borders and fonts look different on each and every browser. To prevent from having to research these differences every time we create a new id or class, most developers are using a so called reset file. In these reset files all the values for the HTML elements are reset. For example the margins of block elements are set to 0, the borders to 'none' and the fonts to '100%'.

If these values weren't reset, and we're developing our website on FireFox, it might look totally different when you open it on another browser such as Internet Explorer. This is caused by the differences in default values the browsers use. By having a reset file, you'll make sure the foundation looks the same on every browser. Even though several reset files are available, you can always choose to develop your own reset file that does exactly what you want it to.

Several reset files

• http://meyerweb.com/eric/tools/css/reset/
• http://developer.yahoo.com/yui/reset/
• http://tantek.com/log/2004/undohtml.css

Frameworks

Several years ago most developers discovered that they we're pretty much starting over for every project in regards to their CSS code. They would have to load their reset files, develop a 'grid' based on the design and set typographic elements such as headers and paragraphs. Of course this wasn't the best solution and that's probably why developers started creating their own frameworks. A framework consists of several dozen lines of CSS code and some guidelines to which you must adhere in order to successfully use the framework.

Most frameworks are based on a column-structure. This was done to make sure that both the designer and developer can use widths in a flexible way and still stay within the predefined grid. Some frameworks have included typographic elements such as a baseline grid or standard headers and fonts. There are even frameworks that have included jQuery elements.

The major advantage of a framework is that you can be sure that your design will probably look quite the same on all the browsers. This reason for this is that these frameworks are tested well and often on all of them. This alone will save you dozens of tedious work hours when you're starting with a new website. When you're planning to start using a certain framework, it is wise to discuss this with your designer first. Often these frameworks include starter files for most design programs, which enables the designer to start of at the right foot immediately.

Several frameworks

• http://960.gs/
• http://baselinecss.com/
• http://www.blueprintcss.org/
• http://bluetrip.org/

Final thoughts

When you don't want to start over for every new project (and I know I sure as hell don't!), it is well advised to study the material above. Choose (with your co-works and/or your designer) a framework that fits your business and needs and start using it. Most frameworks already include a reset file, so that's one less thing to worry about!

Image credits: CSS