I have talked about generalising your style rules, or in other words, being less specific and simplifying your stylesheets. The basic idea is to write rules for the whole site not specific to a page or element. In theory this is nice, although most of us end up writing rules for specific elements. Working on an existing site you usually have to add a very specific rules to the stylesheet so that nothing else is messed up. That makes for long messy stylesheets.
If it's a new site the simplified build process usually goes something like:

  1. visual design
  2. build template
  3. add content
  4. style

There's probably lots of overlap, you may style the whole way through. The overall concept is to get the markup and content in place before you style.

I'm suggesting reordering those steps like:

  1. visual design
  2. style
  3. build template
  4. add content

The important thing to note is that you style, as much as possible, before building the template and adding content. You already know how the site is going to look, thanks to the design. Looking at images of the design, you should be able to visualize the basic structure, columns, header and the elements that will be containing content, paragraphs, lists etc.

Be as general or generic as you can so that you target all similar elements. Style elements as though they are going to be the same on all pages. If there are elements with similar styles, that can't be cleanly targeted in all instances, or you can't visualize from the design all instances, use classes.

This isn't going to wipe out the problem of coming back later and adding specific rules for new content. Hopefully it may limit the instances and provide you with smaller, cleaner stylesheets and markup.

Generally this is the

Generally this is the approach I've always favoured; as many styles should be in a sense generic site wide, if that basic styling is performed first then adding more specific tweaks to say classes elements later helps keep things clear. Where appropriate I will sometimes include a separate stylesheet for page specific styles if I think it will help maintain clarity.

I think the approach to be

I think the approach to be generic is pretty easy to grasp in theory. In practice it can be difficult to maintain. That's why I suggested rearranging the build process, so that you write as much of the styles as you can before building the template etc.

I have always started with the markup then done the styling. Thinking about it the other way round, style then markup, should give more generic cleaner styles.

Has anyone actually tried this, and if so how did it go?

this is the one


I too think this approach is better.keeping the styles limited makes the site also to load very fast and it looks quite good in appearance

promotional links removed