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.
Inline, Embedded, or External
External
Always use external stylesheets.
There are very few exceptions to this rule, and most of the exceptions have exceptions that put you back to the external stylesheet.
By putting all your styles in external stylesheets, you (and anyone else) need look only in one place—your /styles directory—to find all styles in play at your site. As soon as you start embedding styles, all pages in your site potentially have local styles. A basic rule of thumb in coding is: code in such a way that those who come after you, don't come after you.
Embedded
If a set of styles is unique to a page, it is permissible to use embedded styles; otherwise, not.
Even in the above case, consider simply creating a "Specials" section in your main stylesheet. Although the style may be unique to one page today, it may not be tomorrow.
The best way to deal with this eventuality is to keep an external document where all such exceptions to standard practice occur. Do you really want to maintain yet another piece of site documentation?
Inline
What goes for embedded goes double for inline. Before you use an inline style, you would need to be certain that whatever formatting you just created will never need to be overruled from the main stylesheet.
It's highly unlikely you can be certain of this. In which case, see the above paragraph regarding site documentation.
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. One useful approach is to 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.