CSS Basics and Troubleshooting

Recently one of my clients asked me to talk to their developers about good practices and common problems for CSS. Here are some quick notes that I presented on the topic.

Good CSS Practice

Check First and Reuse Before creating a new set of attributes and rules for a new item, its a good idea to look around the site and see if something similar already exists. There’s a chance you can just use it or add on if you need to make a small change. Making the CSS reusable will help cut down on file size and save time. Here’s an example of building on something that already existed:

button, a.button {
background: url("/images/buttons/basic-forms.jpg") center center repeat-x;
border: 1px solid #c5881e;
color: #000;
padding: 3px 12px;
margin: 0;
border-radius: 4px;
-moz-border-radius: 4px;
}
button.light, a.button.light {
background-image: url("/images/buttons/basic-forms-grey.png");
border: 1px solid #aaa;
}
button.green, a.button.green {
background-image: url("/images/buttons/basic-forms-green.png");
border: 1px solid #666;
color: #fff;
font-weight: bold;
}
a.button.green:hover {
background-image: url("/images/buttons/basic-forms-green-over.png");
color: #000;
}


IDs vs Classes IDs should only be used once on a page, they are a unique identifier, hence the “ID”. Classes can be used many times on a page.

Names IDs and classes should follow a consistent naming convention. For example, make them lowercase with a hyphen between words: .page-with-sidebar. Names should also be semantic to give more meaning to those folks following in your path.

Absolute vs Relative In general its a good idea not to use absolute positioning because it can cause problems across browsers and if elements around the absolutely positioned item are changed. Relative positioning will more likely adjust to changes without extra attention. There are some occasions though where absolute works best. For example, text inside of a starburst. The starburst div can be self-contained, so the absolute text inside will just go along with the ride.

Font Sizes Fonts should be set using ems, that way if the user has a larger font set for the browser all the fonts will adjust appropriately. The only time you want to use pts is if the font is restricted inside of a graphic (like the starburst mentioned above). Though most current browsers these days just increase the entire site, not the font alone.

Individual CSS Files When building out a new section or page that requires a lot of CSS you should create a new CSS file. If it has items that would potentially be used in other sections, then it should go in the main CSS, otherwise the individual file is best.

IE Hacks Not recommended, but unfortunately necessary. There are several types of IE hacks, but these are the best because they validate:

.testimonial .quote {
font-size: 3em;
}
* html .testimonial .quote { /* ie 6*/
font-size: 1.4em;
}
*+html .testimonial .quote { /* ie 7 */
line-height: 1em;
}

In the past I would put hacks and rules in a separate ie.css file, but overtime it seems to be more appropriate to put them right next to the items they affect. That way if changes need to be made the IE rules are right there to see.

Tables Should not be used except for tabular data.

Common CSS Problems

Width Most of the problems in IE 6 and 7 have to do with widths and floats. Older IE browsers, for whatever crazy reason, don’t determine width the same way that other browsers do. To troubleshoot this problem I usually put red borders on the items involved, so I can see where they sit (you might want to create a class for this, like “debug”). To solve this problem usually means to adjust the width and make it smaller all around, or for that version of IE specifically using a validated hack (see above).

Empty Divs A couple of times I’ve come across empty divs around things. These cause problems because they don’t have any attributes assigned to them, so the divs inside that are supposed to be doing things don’t know how to behave. In many instances divs need to depend on their parents in order to work properly. In these cases removing the empty div often fixes the problem.

IE Ignoring Changes Remember how I mentioned a separate ie.css file above? Sometimes making changes to the regular CSS files don’t seem to affect things in IE. That could be because the IE CSS files are overwriting them. A quick look in those files will help eliminate a potential problem.

And there you have it. What have I left out? What kind of problems have you come across?