编写具有良好结构的CSS文件

编写具有良好结构的CSS文件

日期：2008-11-5 来源：译言 翻译：水明生

| |网页,css

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

这是我的 welcome section 的一个例子(导航栏下的绿色部分）:

...而下面这些CSS代码是我的左列（包含帖子的主体）和边栏的：

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

<div class="container">

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

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

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


</div>

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

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


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

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

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