CSS Restructure - uniformity

Normally when I work on a project, I tend to take the designer's work as a guideline and standardise things so that I don't have to over complicate my css. If the page headings vary between 32 - 34px I will standardise on 1 size. The same with shades of colour, padding and margin. However, on this project, the designs were so nice, that I want to render them perfectly. I was also enamoured with the fact that I was working on a product, so I would actually have the time to change things later if they got out of control.

Taking rounded corners as an example (I am using css only rounded corners) I noticed that the declarations can be a bit bulky and that we used a wide number of radii, ranging from 2-7. I decided to simplify (which many dev's simply won't have the ability to do) this down to 2 (a 3px radius and a 6). I toyed with the idea of styling a box for each of these, with rounded corners, padding and a background colour, then using extendion classes to change those values (which I still think is a valid approach, but I was worried about needing a class to reset). I decided to go for granularity and created 2 classes: rc6 and rc3 which contained only the border styles.

I proceeded through margins, padding, font sizing in this manner. My process being that I would take the top 2 - 3 most commonly used declarations in each case. Anything deemed too far removed from any of these declarations would be placed in a more specific class.

I then created some colour schemes and styling classes to give a more specific look and feel. These I named generically, so the styles could be altered without making a mockery of the class name :). Again, slight differences in the shading of colours were lost.

The end result of this process is a site which, to date, no one has noticed the loss of fidelity. Things line up effortlessly and future elements can be pretty much guarenteed to line up. I have a 3 column layout, each column may start with either an image, a header or plain text. Regardless of the combination, even with user defined markup, all the elements line up. I am really pleased with the way this has worked out and inted to meddle heavily in all future designs :)