編寫具有良好結構的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代碼的方式。