Friday, September 29th, 2006

Architecting CSS

Category: CSS, Design

CSS is pretty central to Ajax, and large Ajax projects often have a lot of CSS to deal with, so it’s worthwhile asking how to maintain all of it. Garrett Dimon’s Architecting CSS is a good set of advice for structuring your CSS files (from July, 2005; unearthed on Digg).

The article identifies three ways to organise your stylesheets:

  • Archetype-Based A stylesheet for each class of page, e.g. homepage stylesheet, article stylesheet, etc.
  • Page Element/Section-Based A stylesheet for each class of page section, e.g. header stylesheet, sidebar stylesheet.
  • Tag-Based Similar to the previous approach, but based around tags, e.g. form stylesheet, table stylesheet.

Other topics include:

  • Including stylesheets with @include
  • Deciding how much to rely on selectors (Redundancy vs Dependency)
  • Use of comments
  • Use of !important
  • Alphabetizing attributes to ensure you don’t forget any

Posted by Michael Mahemoff at 12:42 pm
1 Comment

3.6 rating from 38 votes

1 Comment »

Comments feed TrackBack URI

It’s a bit too general. But, not a bad reading.

Comment by terry xu — October 3, 2006

Leave a comment

You must be logged in to post a comment.