My main rule is: Never write a class that you can't use again.
I've other rules too, such as "padding is top, margin is bottom".
CSS must be modular, not exception-based.
That's interesting. I've always wondered if some people had conventions on when to use padding and when to use margin, since you can almost always accomplish the desired effect either way.
If you want to be modular, you must have conventions. This is to prevent double spacing when you put two elements one next to another without additional styling. I also use to have ELEMENT > *:first-child {padding-top: 0} on containers, so that I can control the padding of the container and without having to consider what element I place into it.
There's a lot of best practices I made part of my workflow, perhaps I should write a blog post about it.
You can't really. CSS backgrounds are the main reason you need to use padding (instead of margin): margins exist outside an element, while padding expands within the box itself (beyond the content, but permitting the background to remain visible).
Another best practice I have is to place a comment on each closing element, referring to the opening one.
So,I have:
<div class="CLASS">
CONTENTCONTENTCONTENT
</div> <!-- .CLASS -->
When you have complex pages, with several nesting levels, this can save much, much time.
Isnt there a danger that someone else working on your code might not respect that rule (or dare I say it, but maybe you're in a rush one day) and you don't update the comment when you update the class.
Now you've got comments saying in correct things, and you risk all sorts of confusion.
The same rule applies to commenting methods in code really, you don't comment what the code does exactly - just what the intention of the code is.