my rules: 1) Layout and widgets only. I start with a reset, then layout (block positioning), then widgets. Everything other than layout is a widget. There are

my rules: 1) Layout and widgets only. I start with a reset, then layout (block positioning), then widgets. Everything other than layout is a widget. There are no global styles. If there is one of it, it's an ID. If more, it's a class. 2) No (global) element styles! Ever! No, not even a p { margin: xyz } or a ul { list-style-type }. Every element that cannot be referred to by class / id must look exactly like it would after the reset. This avoids complex dependency chains where coincidence influences look. Widgets can be moved from one site to another and you actually have to think new widgets through rather than relying on the default values. 3) Avoid classes and id's as much as you can. Have single base element with a simple but descriptive class name, and then specify the sub-elements. For example: Instead of “div.content-title” use “#content h1″ (e.g. div#content with a h1 tag inside it). Basically, design widgets which consist of one base element, and refer to sub-elements via longer expressions. Use indentation to separate sub-elements. My strong preference is to maximize for human readability (=short dependency chains, descriptive widgets rather than single elements) rather than short CSS. Cascading within widget-scope is fine, but cascading with global styles should be avoided. I find that when I follow these rules, I like my CSS a lot more.