Maintain a Standard CSS Structure

Me and my buddy were discussing our Cascading Style Sheets (CSS) woes because of an evil menu that refused to center itself. After the tiresome tries we just moved on and started discussing about our existing CSS structure. We decided we had to standardize our structure so editing will be less tedious for the both of us.

I’m a designer who’s got no real logical thinking when it comes to programming. I do whatever works for me and even better when it solves the problem. My structure is normally arranged according to the row of a website.


If the Header DIV is first in line then anything found in the there will be found under the Header even though if it’s a Paragraph (P) or Unordered List (UL). The reason I structure my CSS that way is so that elements for that section is easier to find. But of course the structure is then only understood by me quicker than my buddy who might need 5-10 minutes making sense of my structure.

One of the better structures I’ve seen for the first time was in the Kubrick theme by Michael Heilemann. He section out the CSS according to layout, header, lists, miscellaneous items and etc.

Some might not agree with me that it isn’t the best but it’s because we’re all so used to our own methods of structure.

This Simpla theme stylesheet though is rather well done as well. The author arranged everything to layout, content, comment, and etc.

So far I’ve found the Simpla structure the easiest to manage and find whatever I need without taking too much turnaround time figuring where is what. But whether or not it’ll be a healthy standard for me and my buddy is another agenda to be discussed.

So what’s your standard CSS structure like?

Posted by Danny Foo on March 17, 2006 | Filed Under Website Lessons | Bookmark and Share |

Other articles you should have read:

  • A ‘Standard’ Website
  • Danny Foo Makes Websites Simple
  • XHTML : The Semantics Strikes Back
  • 4 Friends with 1 Passion
  • The Art of Writing Code

    • Comments

    13 Responses to “Maintain a Standard CSS Structure”

    Pages: « 1 [2] Show All

    1. Response #1 by David on March 19th, 2006

      btw, I feel your font size is just a bit too small.. for ppl with high resolution monitors it’s tiny.

    2. Response #2 by Danny Foo on March 19th, 2006

      Hey David,

      Thanks for sharing and the linkages. As for the font size, I assume you’re refering to the comment text. I’ll change the color and size of the default right away. :)
      Cheers.

      p/s: If anyone feels they’ve a problem reading any content here, please do tell and try to be specific. Thanks.

    3. Response #3 by Jonathan Ng on March 19th, 2006

      One thing I don’t like about David’s method is it’ll be a little troublesome finding your styles. Firstly, you might not even remember what the class/element was called, let alone in what way it was categorized… putting it all in once place (or at least reduce the separation) makes it a little easier IMO..

      The only advantage of separating the decorative styles is that you can group those with similar styles together for easy changing..

    Pages: « 1 [2] Show All


    Leave a Reply