Styling from scratch [Howto]
A while back Dustin Diaz did a nice explainer on pieces needed for your own personal JavaScript and AJAX interface — if you’re not using a prefrabricated one, that is. The basic idea was that you’ll save both time, bandwidth and debugging troubles by getting the foundation right. And the same thing goes for the CSS foundation.
Reset for a level playing field
First of all, your basic stylesheet should include a few lines to void browser-specific stylesheets and to reset padding and margin on all elements. This means that all browsers will behave the same when you add your own styling, and that you know that you’ll be responsible for all padding, margins, colors, borders and size in the final layout.
There are plenty of examples of such reset stylesheets that you can steal from. Usually, I go for YUI’s version. Along the same lines, have a look at YUI’s Font CSS, which provides similar normalization for font support across different browsers.
Your own common styles
Apart from the resets you’ll want to include a list of the styles that you commonly use. Such as bold, underline or highlightbackground. When you get used to using the same class names over and over, it’ll save you a lot of style=”text-decoration:none;” and so on.
But the main advantage is that you’ll be using one common convention on all pages and on all sites. This saves a lot of cleaning-up when the design is finalized. For example, most sites have boxes with a light background, and you’ll usually want to keep those backgrounds similar. But that background colour can change color as the design develops. Vowing to keep to convenstion from the start means that this is not a problem. And having long-established conventions makes this even easier. I’ll usually go for something like this:
.clear {clear:both;}
.clearleft {clear:left;}
.clearright {clear:right;}
.discrete {color:#7F7F7F; font-size:.95em;}
.discrete a {color:#7F7F7F;}
.small {font-size:.95em;}
.verysmall {font-size:.90em;}
.big {font-size:1.2em;}
.verybig {font-size:1.6em;}
.gray {color:#666;}
.jumptop {margin-top:15px;}
.jumpbottom {margin-bottom:15px;}
.jumpright {padding-right:10px;}
.jumpleft {padding-left:10px;}
.bigjumptop {margin-top:40px;}
.bigjumpbottom {margin-bottom:40px;}
.bordered {border:1px solid #666;}
.borderedtop {margin-top:15px;
padding-top:15px; border-top:1px solid #666;}
.borderedbottom {margin-bottom:15px;
padding-bottom:15px; border-bottom:1px solid #666;}
.center {text-align:center;}
.floatleft {float:left;}
.floatright {float:right;}
.left {text-align:left;}
.right {text-align:right;}
.bold {font-weight:bold;}
.nobold {font-weight:normal;}
.italic {font-style:italic;}
.uppercase {text-transform:uppercase;}
.nouppercase {text-transform:none;}
.underline {text-decoration:underline;}
.nounderline {text-decoration:none;}
.opaque {filter:alpha(opacity=40);
-moz-opacity:.40; opacity:.40;}
.lightbackground {background-color:#F4FBF2;}
.highlightbackground {background-color:#FFFFCC !important;}(By the way, the jumptop, jumpbottom, bigjumptop and bigjumpbottom have turned out to be particularly useful because it allows for easy and consistent margins. And if you want to modify margins for a particular section, it’s as easy as this: #sidebar .jumptop {margin-top:8px;})