title: CSS organisation / structure
body: <p>I've been working on finding the best way to organise CSS code, especially on larger sites. I'm less interested in writing style and more in how people structure and manage their code.</p>
  
  <p>I've been following this structure which I feel works rather well for maintainability but I wanted to get your opinion on this and hear other methods:</p>
  
  <pre><code>/*=======================================
   1. =reset
  =======================================*/
  /**
   Anything but * reset
  **/
  
  /*=======================================
   2. =base
  =======================================*/
  /**
   Base rules so naked HTML has basic style and displays consistently x-browser
  **/
  
  /*=======================================
   3. =base forms
  =======================================*/
  /**
   Base form framework
  **/
  
  /*=======================================
   4. =base site
  =======================================*/
  /**
   Rules common across the majority of pages
   e.g. header, footer, main columns, navigation, search bar etc.
  **/
  
  /*=======================================
   5. =recurring styles
  =======================================*/
  /**
   Re-useable snippets -- not to include positioning / structure etc.
   e.g. buttons, icons etc.
  **/
  
  /*=======================================
   6. =recurring modules
  =======================================*/
  /**
   Re-usable modules common to multiple pages/views but not majority
   e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc.
  **/
  
  /*=======================================
   7. =homepage
  =======================================*/
  /**
   contains rules only applicable to homepage
  **/
  
  /*=======================================
   8. =about page
  =======================================*/
  /**
   contains rules only applicable to about page
  **/
  
  /*=======================================
   9. =contact page
  =======================================*/
  /**
   contains rules only applicable to contact page
  **/
  
  ...and so on
  </code></pre>
  
  <p>Any thoughts would be much appreciated.</p>
  
  <p>Rich</p>