DIV+CSS网页布局,注意不要乱用DIV和class

不知道什么时候开始,对于DIV+CSS网页布局大家都非常热情.在各大网页制作论坛中,也都有着应该是继续用TABLE呢,还是全部用DIV+CSS的讨论. 经过一段时间,大家基本认同了DIV+CSS网页布局.

在接下来的一段时间内,大家都使用DIV+CSS进行自己网页的布局 .虽然有的并不知道这样做是为了什么.

慢慢的就出现在DIV和class乱用的现象...后来很多牛人写出了部门CSS框架

这些CSS框架为我们提供了一套解决方案，使用框架确实能为我们节省不少的时间（其实，我们如果经常写页面的话，也会积累一些常用的CSS，但是并没有汇集成框架），但同时也减少了我们自主考虑的空间，增加了我们的惰性。

以 960.gs 为例，这是一个很著名的理论，国内的一些博客上曾经做过介绍，其原则就是将960px的宽度进行不同程度分割，来达到标准化、模块化使用的目的。如下图，通过使用 960.gs 只需要一个简单的 class 就可以为我们提供不同的标准分割。

image 在其内部，我们可以按照自己的规划进行布局。

image 可以看到，这套框架非常好用，但同时，我们不可避免要使用很多的Div以及Class，按照这套框架的要求来进行结构的编写，同时，加上我们页面中个性化的内容时，过度就开始了。

为了避免这种情况，有几个原则可以遵循：

1、在父元素中使用类，而不是在每个子元素中都加。这个貌似是地球人都知道的规则，但其实真正在实际过程中，如果没有对于样式结构及其继承关系做规划的话，很容易的就需要在子元素中写上很多的特殊的类。这就要求我们必须具有抽丝剥茧的精神，将可以共用的元素样式都抽取到上一级元素上。

2、只使用必要地类。特别是框架提供的类，需要那种布局，就明确使用哪种类；


3、在除了 html、head、meta、param、script、title、style之外的元素上，都可以使用类，所以如果希望实现三栏的布局，不必一定要 <div class="grid_3"><img src… 完全可以直接在 img 标签上使用 class="grid_3"，这样，无疑就减少了三对 div 的使用。而且，有时候这样用起来，更加符合语义文本的目标。
 

总结:让网站结构更加明淅是件好事情,但万事不能过头了...当然DIV+CSS网页布局时也一样~