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.

Answer 3

Sounds simple, but this is some of the best advice i ever read:

A List Apart: Articles: Fix Your Site With the Right DOCTYPE!

Answer 4

You're looking for a CSS framework (and a CSS reset, which usually is available nearby -- see Yahoo's or Eric Meyer's). Yahoo makes an excellent one called Grids. It's a personal favorite and I use it frequently. Other popular choices are the 960 Grid System and Blueprint.

If you're really hungry, consider checking out even more other options.

Answer 5

Using a CSS "framework" is a good start. Blueprint and YUI are both good and adaptable. Object Oriented CSS is also interesting, but always struck me as a better presentation and theory than as an actual starting place. I still prefer using a css framework.

Basically, the idea with a framework is it starts with a complete reset and then provides concrete styles that you can apply to an element very reasonable certainty that it will look that way in every supported browser. The downside is that if you're trying to adapt an existing design (that's not grid-based) it's very tough using a framework, but the reset sheets are still a great starting place, and you can use the rest for pointers.