Refresh

Smashing Magazine has an absolutely wonderful list of CSS techniques vital for any web programmer.

This blog post provides a few simple tricks for coding efficient stylesheets — in the sense of having an organised structure which is easy to navigate and to modify. The color grouping seems like the most useful tip.

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;})

BarelyFitz Design has written up a very nice explainer on how to position elements through CSS. Their step four is probably the one that is most easily forgotten: Combining position:relative with position:absolute. In a nutshell, setting a ‘relative’ position on the container element will allow you to position subelements absolutely within that element. And the explainer goes to show how this method can be used for two- or three-column layouts that rival the traditional methods of floating elements.