如何改良你的CSS代码编写结构（3）

搭建你的页面结构

OK，现在你可以开始设计网站的结构了。如果网站的布局草稿已经准备好，那是可以很快就完成的。不管你选择那一种布局类型，流式或固定宽度，我建议你定义一个.container 类，并让它包含具有相同的宽度的CSS标签，在这种情况下，如果你想改变页面的宽度，只需修改.container 类的宽度就可以了，它所包含的元素的宽度会自动适应：

关于HTML代码

一旦站点的主要区块已经用CSS定义完毕，你就可以开始编写HTML代码。那没有什么复杂的，只需按正确的顺序添加正确的DIV即可：

<div class="container"> 

<!-- Header -->
<div id="logo"></div>
<div id="navbar"></div>
<div id="welcome-section"></div>

<!-- Main Content -->
<div id="column_left">
</div>
<div id="sidebar">
</div>

<!-- Footer -->
<div id="footer"></div> 

</div> 

如果在浏览器上测试正常，你就可以逐步为各个区块（navigation, sidebar, footer...）添加新的具体的CSS代码，即按结构的方式完成你的CSS并整合HTML代码。缩进所有依赖于同一个类的代码：

当你不得不在你的CSS代码中寻找一个具体的标签时，这点小聪明将起到意想不到的效果。

自定义类放在最后

通常，如果有些类多个区块都会用到，那我会以这样的方式把它们添加到CSS文件的末尾：

以能很快认出其主要属性的语义名字来命名每个类。

希望这些小窍门能帮助你简化编写和管理CSS代码的方式。