CSS布局的一般步骤

在开始把设计转换为功能完整的模板时，设计者往往很像马上开始编写页面和处理图像。但是，这样做很快就会遇到麻烦。相反，先做一点儿计划可以避免许多问题。正如俗话说的，三思而后行。

要想创建可伸缩且容易维护的CSS系统，首先应该检查设计，寻找重复的模式，这包括结构中的模式或在站点种元素反复出现的方式。在这个阶段，不应该太关注表现方式，而是应该注意结构和意义。我喜欢打印出每个设计，圈出模式，然后在每个页面上随便写上批注。也有些人喜欢在Photoshop文件上家批注或使用灰色框设计图。

先把页面划分为大的结构性区域，比如容器、页眉、内容区域和页脚。这些区域在整个站点中往往是一致的，很少改变。如果用建筑来类比，可以把这些区域看作建筑物的外墙。

然后，将注意力转移到内容区域本身，开始建立网格结构。设计有多少个不同的内容区域？它们有什么差异？从布局的角度来说，内容区域是确实不一样，还是可以被同等看待？大多数设计只有几个独特的内容区域，所以应该寻找共同的特征而不是视觉表现。你可以把这些内容区域看作建筑物的内部承重墙。

最后，在各个内容区域中寻找不同的布局结构。是否需要把某些信息分为两列、三列或四列？与前面不同，这些布局结构往往非常灵活，在各个页面之间常常有变化。可以把他们看作建筑物的隔断墙。将这些结构与前一部相结合，可以形成每个页面的结构计划。现在，要拿起绘图纸和彩色铅笔，开始详细设计结构和尺寸。

结构设计完之后，现在可以开始关注不同类型的内容。内容是新闻稿、文章还是公告？给每个内容块起一个有意义的名称，然后分析它们的关系。可能新闻稿和公告实际上没什么差别，在这种情况下，把他们组合成一个内容类型是有道理的。

查看没个内容块的结构，看看不同的类型中是否有共同的模式。例如，文章和新闻稿可能都有醒目的页眉和页脚，所以可以加上相应的标识。即使页眉和页脚看起来不一样，实际上也没关系，因为以后可以根据上下文应用样式。对于错误信息、搜索框和菜单项等也是这样。应该尽量采用一般的类名，然后根据上下文应用样式。

找出模式并确定命名约定之后，最好马上开始定义将使用的元素，这是有好处的。例如，连接列表可能是一个无序列表，而文章可能是一个div，其中包含h2、段落和锚元素。与几位同事一起提前定义元素，比随时添加元素容易得多。我还发现应该记下颜色编码、尺寸等信息，着在开发阶段会有帮助。另外，可以在设计的打印稿上添加批注以便快速参考。