Posted on August 21, 2006 in HTML-CSS, with 12 comments.

Here is a list of ten things I wish someone would’ve told me when I first started designing in CSS. This is by no means, a list of the best CSS tips ever, just good ones that often get overlooked, or unmentioned.

Also, if you know of any less-than-popular CSS tips/tricks let me know , and I’ll include it here or in a future article.

Use a common naming system

Having a naming system for id’s and classes saves you a lot of time when looking for bugs, or updating your document. Especially in large CSS documents, things can get a big confusing quickly if your names are all different. I recommend using a parent_child pattern. The parent would be the containing element. So if our first div was named “header”, and two divs nested inside called “navbar” and “logo”. the naming system in your css would look like this:

#header #header_navbar #header_logo

This is just an example, and I’m sure everyone does it differently. The point is to have some kind of pattern, or system to combat the eventual confusion that seems to lend itself to CSS documents.

Note: If you look at my CSS, you’ll see that I still have to do this myself. I should’ve taken my own advice when I started and it would’ve saved me a lot of work :)

Document common colors in the CSS commenting

It’s easy, and it saves you a ton of time. Before you start you CSS document, get your color scheme together and just post all the colors in a comment at the top of the document.

Mine looks something like this:

/*
Colors:
Dark Red #7762b0
Royal Blue #88jb04
Purple #663300 */

Comment, comment, comment!

Now this one you might’ve heard before. I’m only listing it here because even though I was told how important commenting in your CSS was, I underestimated it’s usefullness.

If nothing else, at least divide your CSS document up into large chunks. Using comments like: /* —- Header —- / and / —- Footer —- */ will make life a lot easier down the road. Especially when you’ve spent a good bit of time staring at your computer screen and the CSS all begins to look the same.

Check for closed elements first when debugging

If you ever get frustrated because it seemed like you changed one minor thing, only to have your beautiful holy-grail layout break, it might be because of an unclosed element. I’d say that a good 75% of errors I run across when debugging a CSS document are unclosed elements. Granted, there are a lot of other things you can do to severely screw up a layout too, its just good to check the closings first, before you get angry and throw the keyboard.

Use CSS shorthand when applicable

It just makes things easier. These are some common shorthand uses:

background: #fff url(image.gif) no-repeat top left
(background-color, background-image, background-repeat, background position)

font: 1em/1.5em bold italic serif
(font-size/ line-height, font-weight, font-style, font-family)

For more on CSS shorthand see this article .

If possible get content in place before you style

This one is tricky, because every designer has his own method. But, from my experience, it is a whole lot easier to style up a document if I know exactly what will be in that 150px by 150px div in the top left.

Plus, a lot of times a good layout can turn out structurally unsound if you load it up with content afterwards. Using filler text (lorem ipsum ) is common, and helps to make sure your layout doesn’t break. Sometimes it’s not possible, and you might be at the mercy of your client. But, if you’re able to, it’s always better to go ahead and use the actual text if you’ve got it.

Always declare margin and padding in block-level elements.

I thought this was brilliant the first time I heard it. Although I can’t remember the forum where it was mentioned, a guy said he always starts out his CSS block-level elements (divs mainly) like this:

margin: 0;
padding: 0;

If you do a lot of positioning, or need a pixel-perfect layout, this is right down your alley. Although it is less common nowadays, browsers will sometimes have a default padding and margin for certain tags (like the

tag). By declaring a margin and padding on all you’re block level elements you avoid the issue. Also this trick has saved me tons of time when dealing with overlapping issues or any number of other layout annoyances.

Avoiding annoying border adjusts

When I was styling my links for this site, I used a border-bottom when the links were hovered over since i wanted it to be thicker than 1px. So i added border-bottom: 3px solid white; to the a:hover element, only to have the site shift everything down under each link I hovered over. It was making room for the bottom border.

The solution? Add a border to the “a” element and just have it match the background color. Then in your “a:hover” element use the same line but with a different color. That way when you hover over the link, it doesn’t have to draw a new border-bottom (and thus shifting the stuff underneath a tad) but rather just change the color of the existing border.

Stuck? Confused? Chances are someone’s come across the same thing. Google it.

You hear it all over the forums, and in all the FAQs, and it’s as true in web design as anything else. Chances are that if you have some weird problem (and especially if that problem manifests itself in IE but not FF) somebody, somewhere has run across it as well. And, more often than not, they’ve found a simple and elegant hack that degrades well with older broswers.

As I got more familiar with CSS I began to try to hack IE myself, instead of asking for help. It got me into a ton of trouble, as my hacks weren’t as good or simple as the ones I should’ve been using.

Get the web dev. tool for Firefox

It is utterly worth it’s weight in gold when designing CSS based sites. You can validate your CSS and HTML, outline block level elements, label all elements, and tons more with just one right mouse click. Get the tool here.

Comments

Leave your comment

Name
Remember

E-mail
Textile Help

Website

Message