CSS:

The first stylesheet is the Yahoo! reset stylesheet which zeros out all styles. The second stylesheet sets the global CSS for screen media. I also allow for script-specific and section stylesheets and other media stylesheets. For bigger sites I try to modularize my stylesheets so the load time is reduced.

Practices followed:

I optimize the code so that it's as short and fast loading as possible. That said it is always to important to browser check my code in as many browsers as possible.

  1. Comment on the author and date at the top.
  2. I use EM's for the most part, as they seem to render slightly more regularly, but PX's are used for specific widths and heights as well.
  3. I try not to be too limiting in my names. For example the first column that has a width of 234px might be called called w234. If in the future that definition is changed to have a width of 450px suddenly the name is meaningless and confusing. This also applies to percentages.
    The name "column1" is not misleading however, since it does not specify any details of its contents. However it needs a guide on how to use it, since it is very ambiguous.
  4. It's an optional extra, but I have organized my styles into the sets (also computed by firebug). This practice does not use alphabetization, so I have incorporated it.
  5. I use shorthand where possible.
    #900 vs #990000
    0 vs 0px
    padding:0 5px 10px auto; vs padding-top:0;padding-right:5px;padding-bottom:10px;padding-left:auto;
  6. The box model plays an important role, so I use conditional stylesheets to re-define classes where necessary. I've learned to avoid problems with the box model, however, by not defining width and padding in the same class.
  7. I tab the values of style definitions so that they read in a line
  8. I tab all definitions in a class: if it's a hack, I tab it twice.
  9. I try to avoid hacks when I can, rather I prefer to use a conditional stylesheet so all styles are in one place.
  10. When I name a class, I follow this logic:
    overarchingClass_elementValue_extra
  11. I use the !important attribute with extreme discrimination. It is a last resort if NOTHING else is working, but sometimes it is useful when testing styles.
  12. I generally try not to define only one aspect to a given class, however it is sometimes necessary for columns.