Is there any web layout paradigm that makes CSS a little bit less... unpredictable?

Question

What motivates me to write this question is that I'm really into making good appearing web-sites but I definetly do not feel confortable with CSS.

My feeling is that it's all about trial-and-error. I need to try to do something and test, test and then test it over again in all browsers and after all I still have a feeling that the result isn't that cross-browser.

I can't find a way to systematically transform an idea in a consistent layout that is easy to read and cross-browser.

So I'm asking you: Is there a paradigm, a step-by-step guide or anything that could help me having the feeling that I'm doing it the right way?

Answer 1

Use Object Oriented CSS. Their approach is really methodical; pages makes sense just by looking at the markup. The layout component is particularly good.

For example:

 <div class="line">
  <div class="unit size1of2">
    <h3>1/2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="unit size1of2 lastUnit">
    <h3>1/2</h3>
    <p>Lorem ipsum dolor sit amet...</p>
 </div>
</div>

Doesn't the markup above just make sense? You can find more Grid samples here.

Also, you should probably know that OOCSS is built upon the CSS Reset Stylesheet and Fonts from the YUI library. Although OCSSS has no real "styles" defined, it provides a great foundation to make your CSS more predictable and consistent.

Answer 2

Look into using a CSS reset stylesheet, like Eric Meyer's. With this starting point, everything 1) starts to make a little more sense and 2) doesn't have as many cross-browser issues.