skip to main content

TAMU Webmaster's Blog


Information and insight from the A&M Webmasters

Using CSS – Recommendations

June 28th, 2007 by tamuwebmaster

In the same way there are best practices for writing HTML or application code, there are best practices for developing and using CSS. The guidelines below present recommendations for writing clear and useful CSS.

Important Note: Not all browsers and platforms support all CSS properties similarly, or properly! Make sure to test styles sheets in the recommended browsers and any additional target browsers your site supports. IE6 is often particularly troublesome in how it interprets CSS.

  • Construct styles that can be applied in a wide variety of situations. The idea of stylesheets is built upon the idea of reuse; avoid building separate style sheets for individual web pages.
  • Define styles at the largest object level possible. For example, instead of defining fonts at the <p> level, define them at the <body> level and make exceptions where needed. Also, try to style at the <div> level rather than the individual elements of a <div>. For example, if you have a <div> defined for your navigation bar, style the <div> instead of individually styling each navigation element within the <div>.
  • Add to base styles rather than overwriting them. The “Cascading” nature of CSS is a great benefit, so put it to use as well. If a single style is used for a number of elements, define it, and let it cascade on to the elements underneath instead of rewriting it for every tag. For example, if you have already defined fonts for the <body> tag, don’t specify the same font again for the <ol> tag.
  • Use semantic style names, not presentational style names. For example, if you define a style for displaying headers, do not call it maroonLined based on how it looks (presentational); call it mainHeader because of its how it is used (semantic). This similar to using semantically correct HTML – <em> rather than <i> or <strong> rather than <b>.
  • Avoid using inline styles (using the style attribute within a tag), and use embedded styles (styles defined in the head) sparingly. Using inline or embedded styles goes back to mixing content with presentation, making maintenance, accessibility, and updating more difficult. It also increases the size of your file. So instead, use the <link> tag or @import to link to an external style sheet.  See http://webdesign.about.com/od/css/a/aa073106.htm for a more detailed writeup.
  • Use IDs for unique elements and classes for groups of elements. IDs are used to distinguish unique sections of a page. For example you might have <div id="header"> or <div id="mainContent"> on a page. Use classes to apply styles to elements on a page that are similar in nature.
  • Ensure that pages are meaningful and readable if style sheets are turned off. Test your pages by looking at them with style sheets turned off.
  • Use print style sheets if possible. Many users like to print pages, particularly content pages. Include a print style sheet to make the print page better suited for a print out. This will save them ink and toner. Make sure you also have your images placed where you want (as background images or placed on the page) if you want or don’t want them to print out.
  • Use “%” or “ems” for font sizes instead of absolute pixel measurements or “pts.” Try to use % in margins as well.
  • Validate all CSS. Using a CSS validator will help.
  • Use comments in style sheets so they can be easily understood. For example:

/* Body element styling */
body {
font-family: Verdana, Arial, sans-serif;
color: #CC5500;
}

  • When structuring style sheets, proceed from general to specific in the style definitions. For example, style X/HTML tags first, general style classes next, and then specific divs with IDs next.
Thursday, June 28th, 2007 Style Guide
Share this article

1 Comment to Using CSS – Recommendations

  1. I couldn’t have said it better myself. Great article that needs to be read by all developers.

  2. Christopher Weldon on June 29th, 2007

Leave a comment

Categories

Archives