University Web Services

Best Practices

Stylesheets

Once your stylesheets become more complex, you will want to organize them in some way. Here's how we do it.

Stylesheet Files

Use a department-wide (or college-wide) stylesheet and introduce local modifications as needed in a secondary stylesheet.

If you use a print stylesheet, call it print.css

Use the cascade. If a set of styles are used across a subset of pages, make a secondary stylesheet.

Always use external stylesheets, unless there is some very strong reason to do otherwise and you know exactly why you're doing it and you do so on a limited basis.

Styles for Styles

Use ems or percentages; use pixels only when unavoidable

Design your CSS to standards, then hack where necessary (in other words, don't design for Internet Explorer).

Put each element on its own line to increase readability. Example:
h2 { background-color: #eee; color: #000; font-family: palatino, times, serif; padding: .5em; }

Organizing Styles

Group style statements. Put all general (body-wide) statements first, then group statements by div. The goal is not merely readability; it's readability across departments and across campus.

Within divs, list styles alphabetically by tag.

Within a given style, list elements alphabetically.