有没有任何Web布局范例可以让CSS变得不那么…不可预测?

使用 Object Oriented CSS . 他们的方法非常有条理;页面只需查看标记就有意义。布局组件特别好。

例如:

 <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>

上面的标记是否有意义?您可以找到更多网格示例 here .

另外,您可能应该知道OOCSS是建立在来自于yui库的CSS重置样式表和字体之上的。虽然OCSS没有定义真正的“样式”,它为您的CSS更可预测和一致提供了一个很好的基础。

研究如何使用CSS重置样式表,比如 Eric Meyer's .有了这个起点,一切1)开始变得更有意义,2)没有那么多跨浏览器问题。

听起来很简单,但这是我读过的最好的建议:

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

您正在寻找一个CSS框架(和一个CSS重置,通常在附近可用——请参阅雅虎或埃里克迈耶的)。雅虎是一家优秀的公司 Grids . 它是我个人的最爱,我经常使用它。其他流行的选择是 960 Grid System 和 Blueprint .

如果你真的饿了,考虑退房。 even more other options .

使用CSS“框架”是一个很好的开始。 Blueprint 和 YUI 都是好的和适应性强的。 Object Oriented CSS 也很有意思,但总让我觉得这是一个更好的陈述和理论,而不是一个真正的起点。我还是喜欢使用CSS框架。

基本上,框架的想法是从一个完整的重置开始,然后提供具体的样式,您可以应用到一个元素,非常合理地确定它在每个受支持的浏览器中都是这样的。缺点是,如果你试图改变现有的设计(而不是 grid-based )使用框架是非常困难的,但是重设工作表仍然是一个很好的起点,您可以使用其余的部分作为指针。