警惕Div和Class的濫用

大概在06年的時候，我剛接觸Div+Css的網站布局，那個時候大家對於標準的熱情非常高漲，藍色論壇裡經常為了Table還是Div+Css而爭論的熱火朝天。現在，大家已經形成了共識，Table用來布局是不行的，但是網頁裡完全不用Table，也是不好的。

於是大家就開始都用Div+Css布局，這樣做的目的本來是為了讓網頁文檔更語義化、結構更加清晰、代碼更加少、便於維護，這是一個非常好的目標。但是事實告訴我們，有好的目標，不一定能夠做出好的事情來。緊接著，就開始出現了Div和Class的過渡使用。特別是在借用了一些Css架構，諸如960.gs,YUI Grid 這樣的CSS架構的時候，我們會不自覺的多使用一些Div。

這些CSS架構為我們提供了一套解決方案，使用架構確實能為我們節省不少的時間（其實，我們如果經常寫頁面的話，也會積累一些常用的CSS，但是並沒有彙集成架構），但同時也減少了我們自主考慮的空間，增加了我們的惰性。

以 960.gs 為例，這是一個很著名的理論，國內的一些部落格上曾經做過介紹，其原則就是將960px的寬度進行不同程度分割，來達到標準化、模組化使用的目的。如，通過使用 960.gs 只需要一個簡單的 class 就可以為我們提供不同的標準分割。

在其內部，我們可以按照自己的規划進行布局。

可以看到，這套架構非常好用，但同時，我們不可避免要使用很多的Div以及Class，按照這套架構的要求來進行結構的編寫，同時，加上我們頁面中個人化的內容時，過度就開始了。

為了避免這種情況，有幾個原則可以遵循：

1、只使用必要地類。特別是架構提供的類，需要那種布局，就明確使用哪種類；
2、在除了 html、head、meta、param、script、title、style之外的元素上，都可以使用類，所以如果希望實現三欄的布局，不必一定要 <div class="grid_3"><img src… 完全可以直接在 img 標籤上使用 class="grid_3"，這樣，無疑就減少了三對 div 的使用。而且，有時候這樣用起來，更加符合語義文本的目標。
3、在父元素中使用類，而不是在每個子項目中都加。這個貌似是地球人都知道的規則，但其實真正在實際過程中，如果沒有對於樣式結構及其繼承關係做規劃的話，很容易的就需要在子項目中寫上很多的特殊的類。這就要求我們必須具有抽絲剝繭的精神，將可以共用的元素樣式都抽取到上一級元素上。

 

參考資料：
1、Fight Div-itis and Class-itis
2、960 Grid System
3、YUI2 Grid CSS