twitter facebook dribbble email

Optimise your CSS

Careful! This post is looking a little old and could be inaccurate in many, many ways

I use CSS on a daily basis and am always looking for new ideas and techniques to improve my work. Below are some of the techniques I have come across that I utilise in almost all my websites. Not all these will suit every person or project, but they certainly help me:

1. Basic Stylesheet

What this method does is reference CSS in different ways so that older browsers ignore the bulk of the CSS. By using the @import we can ensure that only newer browsers (IE6 and above) will run the main CSS, the basic.css file then contains minimal style ensuring all content is displayed as well as a prompt to upgrade their browser to view the website properly.

Thanks must be given to Jon Hicks as it was his presentation at FOWD London 2008 where I first came across this method.

2. Master.css

As can be seen in the code above I reference only one other file for my CSS within the HTML, this is my master CSS file. Rather than have numerous calls to CSS files from within my HTML I instead use this file to reference all the other files I require.

In every site I will use the above stylesheets but in some circumstances I will add more stylesheets such as weblog.css for blog specific elements and sifr.css when using flash replacement techniques.

A List Apart talks about splitting your CSS by layout, type and colour. Currently I have not had opportunity to test the system to see how it suits my workflow, however the benefits to progressive enhancement are clear.

3. Reset.css

I have previously posted about my use of a CSS reset file and I personally think it’s the technique that has had the biggest impact on my workflow, and greatly decreased my workload. Currently my reset file is a rewritten version of the Eric Meyer classic. I think it’s important if you use any external code you attempt to understand it. To write and debug and a website efficiently you should have complete understanding over all the code used.

4. CSS Definitions

I currently use little in the way of version control, so instead I define some simple information at the head of all my CSS files. The main benefit of such as system is to have a standard system when working in a team. Although my CSS files are rarely viewed by others I think this is good practice.

5. CSS Comments

Stylesheets can get very long and disorganised over time, for this reason I comment my CSS into sections. Each section will contain CSS for a particular element or group of elements. I then number the sections with some consistently numbered from project to project to help in locating certain sections of code even easier.

6. Single Line CSS

When I look through a lot of other developers work that use multi-line CSS I get headaches as I search through line’s upon lines of code. Seeing each CSS property given a single line makes it hard to scan through and hard to write. So instead I define one element and all its properties on a single line. This allows me to view more CSS on screen allowing faster movement between different elements in the file.

7. Shorthand CSS

As can be seen in the CSS above I also use shorthand CSS. What this does is minimise the code you write by collecting similar information into one property. Below you can see an example used for borders but similar can be used for padding, margin, background, font and list-style. There are also some colour hex codes than can be shortened to three digits such as #000000 becoming #000. I personally don’t use this technique as I use a lot of six digit codes and prefer the consistency through my CSS.

8. Alphabetical Ordering

Many people that use multi-line CSS complain that using the single-line method is difficult to read as it takes longer to find a certain property when buried in a single line. This is true unless you keep your code tidy and consistent. I therefore define each property in alphabetical order, starting with azimuth and ending with z-index. This makes finding a property within the line much easier so long as you know your alphabet.

9. Clearfix

When working for a company where SEO is of such importance I have to approach a site with that in mind. For this reason I use many floating elements to ensure content is situated where required in both the code and design. When using floats however the issue arises of parent elements not correctly wrapping around floats. To fix this I use the clearfix method. By defining the CSS below I simply add the class clearfix to any parent element that contains floats.

10. Reset em font size

When I began using em’s instead of pixels to define font size I found them complicated to use as the size you set for the current element was defined by the size you use on any parent element. This is made harder when you are unsure of the starting size defined by the browser. To help you can reset the starting font size to a 10px equivalent with the code below. This gives you a workable starting point, making defining em’s much easier through the rest of the CSS.