有没有任何网页布局范例可以让CSS少一些......不可预测？

Question

我写这个问题的动机是，我真的想要制作出色的网站，但我确实觉得CSS并不舒服。

我的感觉是所有关于反复试验的。我需要尝试做一些测试，测试，然后在所有浏览器中重新测试，毕竟我仍然觉得结果不是跨浏览器。

我无法找到一种方法，以易于阅读和跨浏览器的一致布局系统地转换想法。

所以我问你：有没有一个范例，一个循序渐进的指南或任何可以帮助我感觉我正在以正确的方式做这件事的事情？

Answer 1

使用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是基于CSS重置样式表和YUI库中的字体构建的。虽然OCSSS没有定义真正的“样式”，但它为使CSS更具可预测性和一致性提供了良好的基础。

Answer 2

使用CSS重置样式表，例如Eric Meyer's。有了这个起点，一切1）开始变得更有意义，2）没有那么多的跨浏览器问题。

Answer 3

听起来很简单，但这是我读过的一些最好的建议：

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

Answer 4

你正在寻找一个CSS框架（以及CSS重置，通常在附近可用 - 参见Yahoo或Eric Meyer）。雅虎制作了一款名为Grids的优秀产品。这是个人的最爱，我经常使用它。其他受欢迎的选择是960 Grid System和Blueprint。

如果您真的很饿，请考虑结帐even more other options。

Answer 5

使用CSS“框架”是一个好的开始。 Blueprint和YUI既好又适应性强。 Object Oriented CSS也很有趣，但总是让我觉得它是一个更好的表现和理论，而不是一个真正的起点。我仍然更喜欢使用css框架。

基本上，使用框架的想法是从完全重置开始，然后提供可以应用于元素的具体样式非常合理地确定它将在每个支持的浏览器中看起来那样。缺点是，如果你试图调整现有的设计（不是grid-based），使用框架是非常困难的，但重置表仍然是一个很好的起点，你可以使用其余的指针。