My #1 tip is to use a CSS grid system such as 960.gs - http://960.gs/ or Blueprint CSS - http://www.blueprintcss.org/
You'll solve so many headaches with layout, at the cost of having ugly CSS class names.
You'll solve so many headaches with layout, at the cost of having ugly CSS class names.
Here's why:
Let's say you have a class "column-760" for a 760px wide column. Now let's say you want to re-design the page. Not only do you have to write new styles, you have to go in and remove all the places you've written "column-760" in the actual markup. This entirely defeats the purpose of external CSS, and incorrectly couples style with content. I can't tell you how frustrating it is to work on a page that says something like:
<div class="column column-760 relative green-background"></div>
DO use content descriptive class names, DON'T use physically descriptive class names.
Also, if you're using a template or theme, many of the changes you'd need to make if you were changing the layout would only be made in one place.
As for your second point, it really depends on the coupling. If you are using a grid system, like I was talking about, it's pretty rare that you would ever want to restyle EVERY single 760px wide div (which just leads to more class layering and more of a headache).