讀寫看起來容易，實則非也。對於網頁設計來說，讀寫行為因為多種原因而重要，並且在網頁設計過程中，它們有著較高的優先順序。我想說的是，用較好的方式寫程式碼是非常重要的。這是因為，要讓其他任何和這些程式碼打交道的人感到舒服。

1. 定義好的結構

CSS 可讀性最重要的一點是要有一個好的結構。有好的結構，在尋找特定 CSS 規則的時候才能縮小尋找區域。最好的方法是用 HTML 檔案構成的風格來結構化 css 檔案。這樣的 CSS 檔案就比較舒服，而且你也能準確的知道如何定位。

<div id="wrapper">  
    <div id="header">
    </div>
    <div id="body">
        <div id="content">
        </div>
        <div id="sidebar">
        </div>
    </div>
    <div id="footer">
    </div>
</div>  

 
#wrapper {...}
#header {...}
#body {...}
#content {...}
#sidebar {...}
#footer {...}

2. 定義顏色特區

每個網站顏色的數量各不相同。因此，為設計中用到的顏色定義一個特區會是很好的實踐。一個很好的理由就是就算過了一段時間你也可以很容易的認出這些顏色，而且也可以迅速的替換這些顏色。

3. 每行一個 CSS 規則

寫 CSS 程式碼的時候，要考慮到有事需要粗略的瀏覽檔案來搜尋一些特定規則。在一行中宣告 CSS 規則是個不錯的主意。

這樣就可以利用水平方向上浪費的空間，也能縮短檔案的翻頁頁數。

4. 定義排版樣式特區

每個專案中排版都應該是非常重要的。應該為專案中用到的樣式化文字設定一個特區。這會節省很多時間而且會激發你的生產率。

/*............Typography................*/

body { font: 62.5%/1.5em Tahoma, Arial, sans-serif; }  
h1 { font:700 2.4em/1.5em Arial, sans-serif; }  
h2 { font:400 2.0em Verdana, sans-serif; letter-spacing:-1px; }  
h3 { font:700 1.8em Arial, sans-serif; }  
...

5. 縮排 CSS 規則

對於可讀性來說，縮排是一個非常重要的方面。CSS 檔案最好的縮排方式就是 HTML 檔案的縮排方式。

這樣可以在 CSS 檔案中以某種方式重新生成 HTML 標籤的視覺化結構。縮排 CSS 檔案時要想著把宣告排成一行，這樣 CSS 屬性就能形成一個緊湊的塊。我在 Chris Coyier 的 CSS 檔案中看到這個方式，認為這是個好想法。見下面的原始碼(第二部份)。

<div id="wrapper">  
    <div id="header">
    </div>
    <div id="body">
        <div id="content">
        </div>
        <div id="sidebar">
        </div>
    </div>
    <div id="footer">
    </div>
</div>  

#wrapper            { width:960px; margin:0 auto; }
    #header         { float:left; width:960px; height:116px; }
        h1#logo     { float:left; width:188px; }
        #menu       { float:right; width:100%; text-align:right;  }
        #menu li    { padding:15px; color:#fff; display:inline;  }
        #menu li a  { color:#fff; text-decoration:none; }

6. 首先定義顯示屬性

通常，在我的專案中，我的 CSS 版面是基於浮動的。這是我的方式。。。相對與定位來說，我更喜歡浮動。

總之，我認為首先宣告 float，width 和 height 這 3 個屬性是個好的方式。這樣，就可以從CSS 規則中靠前的定義獲得顯示版式。基於這 3 個屬性，也可以幫助你視覺化整個網站結構。

#wrapper            { width:960px; margin:0 auto; }
    #header         { float:left; width:960px; height:116px; }
        h1#logo     { float:left; width:188px; height:61px; }
        #search     { float:right; width:270px; }
        #SearchBox  { float:left; width:180px; height:28px; }
        #SearchBtn  { float:left; width:80px; height:28px; }
    #body           { float:left; }
        #content    { float:left; width:600px;  }
        #sidebar    { float:right; width:300px;  }
    #footer         { float:left; width:960px; }

總結

這幾個步驟不會產生完美的可讀性 CSS 程式碼，可以肯定的是它們可以讓你的生活簡單些。嘗試下並告訴我你的想法。乾杯！

原文地址：http://www.graphicrating.com
糖伴西紅柿說：這篇文章和《快速寫出較好CSS的5種方法》差不多，只是根據自己的經驗來探究下寫程式碼的良好習慣。我想，每個人都有自己的習慣。但是我們的眼光不應該集中在那些文章中你認為不好的方面。這不是我們學習的目的。我們應該尋找文章裡好的東西來改進自己的方法，提升自己。

正確、高效的寫出良好的程式碼才是我們真正的目的。

其實我想說的是，討論技術的時候我們眼裡應該沒有其他的干擾，只有技術問題。