1. Use a test page

Make a test page that has:

  1. All of the common HTML elements
  2. All of your widgets and inline elements
... on one page. This allows you to make and preview changes quickly.

Snippllr.com has a couple of test pages containing the major HTML elements:

http://snipplr.com/view/8121/html-test-page-for-css-style-guide/ http://snipplr.com/view/12564/css-test-page/

2. Start with a CSS reset

Using a CSS reset helps because it eliminates the inconsistencies between browsers and forces you to specify all of the styles you want. It makes CSS stylesheets more explicit, which is a good thing for maintainability.

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

http://developer.yahoo.com/yui/reset/

3.Order your rulesets into sections - generic to specific

Use stylesheet rule order to define "base" and "special case" tags. First, organize your CSS rules into sections so that the most generic rules (e.g. typography) come first before specific rules such as widgets. This is useful because it makes it easier to locate rules within the file and to make modifications.

For example, I have used the following sections:

  1. Base/reset styles (Yahoo's CSS reset rules)
  2. Typography styles (inline elements applied to the whole page such as fonts, links, headings, paragraphs)
  3. Layout (fixed containers, blocks of content and other "website-specific" positioning)
  4. Widgets (ex. informational messages, contextual help, menu lists, collapsible navigation list, tabs, table styles...)

4. Order your widget rules from "base" to "special case"

Organize the rules into "base" widgets and "special case" if necessary. Have the "base" widget specify the most important rules, and then override for the "special case".

5. Indent your CSS files!

Use indentation to organize the code - the first level of indentation is for sections, the second for widgets and the third for special cases of widgets or sub-widgets. (If you are concerned about bandwidth, use a CSS minifier afterwards - don't sacrifice understandability just to try to save a few characters).

For example:

/ Css reset /
/ Base styles /
   ...
/ Typography styles /
   ...
/ Layout styles /
   / Containers /
   ...
/ Widgets /
   / Information messages /
   ...
   / Tabs widget /
   div.tabs {
      ...
   }
   div.tabs ul {
      ...
   }
   div.tabs ul li {
      ...
   }
   div.tabs ul a:link, div.tabs ul a:visited {
      ...
   }
   div.tabs ul li.selected a, div.tabs ul a:hover {
      ...
   }

6. Keep the dependency chains as short as possible

Avoid modifying the HTML element styles without specifying a class. Adding styles to tags without a class -attribute is problematic because it makes the dependencies much more complex.

By keeping dependency chains short - so that the base CSS is unmodified and all necessary styles are defined on a class-specific level - you keep the dependencies reasonably simple.

7. Never rely on coincidental nesting & avoid "class-itis"

"Class-itis" is the disease that causes CSS files to have too many classes. Instead, use tag nesting to create widgets.

Have single base element with a simple but descriptive class name, and then specify the sub-elements.

For example:

  • Instead of "div.content-title" use "#content h1" (e.g. div#content with a h1 tag inside it)
  • Instead of "div.form-label" use "#form label" (e.g. form#form with a label tag inside it)

Comments

gman: I'm not an HTML or CSS guru by any means but running a blog, I can say that "#content h1" makes it hard to edit my blog.

What happens is around the main page there is #body or some such. That means EVERYTHING inside that is effected. Around that this are things like #left-column, #middle, #right-column. So now both #body and #middle effect everything in my content. Finally there is something like #posts, #post and #content

So I'm trying to write some content. I need a table. That table needs custom styles to get it's point across. But now the css for #body, #middle, #posts, #post and #content all effect it. I really want an easy way to be able to make some custom content with custom styles and not have to know which 25 settings I need to reset because of the "#id tag" idiom.

Is there a recommended way to do that?

Mikito Takada: Thanks for commenting. I think that there is a small set of inline elements, such as H1 for which it is useful to define "global" styles. You can still override the styles in those cases where it is necessary - just organize the related elements as a "widget" with a base class name or use an ID.

I don't think tables should have global styles besides the CSS reset. It seems to always end up being too complex. So what I would do is give the table a class name or ID, and give each type of table widget it's own set of styles.

This would include inline elements like H1 as well - but instead of relying on the coincidental application of styles from the "global style" I would explicitly define all the necessary styles inside the widget definition. This wastes some space, but in my opinion stylesheets are meant to be human-readable and portable and if that requires an extra couple of hundred bytes, it still is worth it.

Brian: All and all a good article. Well done !!