CSS Structure

(subtitle: how to convert your .css to a monster)

When you build .css files you begin with an empty document. The problem is not how to fill it but how to keep it simple and easily editable. Which means that you have to be very specific when naming divs and typography styles (especially when it comes to classes). Here there are some guidelines which are very useful for me. You might find them interesting too.

• Fisrt of all work with a good editor. Dreamweaver is OK, but I prefer TopStyle or AceHTML.
  Tip: TopStyle enhances your work by including a color palette which shows you all the colors you use in your .css file.
• Start with the basic layout and use common name conversions for the building divs. Use the words banner, top, wrapper, content, navigation, extras, footer etc. instead of stripe, left-column, right-column etc. Be as specific as possible.
• Color the background of your basic divs in the very beggining in order to check that the building blocks have been set correctly. Then remove the background colors.
• Treat the similar blocks of code as a group e.g. have all the styling for your forms together
• Comment all the previously mentioned groups of blocks
• Do not build general typography blocks of code. Remember that each area of your website has its own needs. It is much easier to work with
  #extras h1{
font-family: Georgia, sans-serif;
...
}
  instead of a too general
  h1{
font-family: Georgia, sans-serif;
...
}
  which you will probably going to alter it at a later time.
• Add .css which include styling for different parts/pages/areas of your website. It is easier to keep track of your work when your work with more than one .css files. However, more than three .css files could complicate your work very much.
• Do not forget to validate your .css files every once in a while.
• Last but not least: do not avoid correcting your stylesheet on time. Leaving it for later is the best way to get confused with your own work!