關於Div+CSS的好處

From 博主：一直在Web開發中思考為什麼以前的程式員那麼執著於table而不用Div+CSS，個人從事Web開發以來一直都堅持走Div+CSS路線並且主張在Js上做到OO和視圖動作分離，但是無奈IT公司永遠都把開發速度防在首位，最近看到這篇文章討論Div+CSS的好處，說得真的很貼切，於是轉載來跟大家分享一下。

 

文章出處：http://www.awflasher.com/blog/archives/583

 

【原文】

 

雖然目前在公司相當忙，但是仍然有必要討論一下div+css的問題。因為它已經不再是兩年前那個新鮮的名詞了。它正逐漸步入廣大傳統Web開發、設計人員的視野。它的好、他的壞，已經逐漸開始成為前端工程師爭論的焦點。

 

今天偶然看到“一個有將近兩年的div + CSS 開發經驗和曆史，曾經是Web標準絕對擁躉的同志”在自己的blog上發表放棄div+css的申明。我更深感一種悲哀——特別是當我苦口婆心地勸說公司的前端開發人員開始學習DIV+CSS的時候。

 

不過看看這個“好同志”放棄的理由的其中兩條，不禁讓我所心冷。

• 公司領導及客戶不關心這個，他們需要的是快速、高效的工作和花哨的頁面
• 所費功夫與收入不成正比，利用table可以大大減少工作量

確實，當今市場環境下，div+css對於一個財力一般的公司是一種奢侈。尤其是對於那種靠業務員瘋狂跑業務而存活的（不打算上市）的公司，是一種莫大的浪費。我在廣州曾見過許多“三天建站”的公司其中90%的人在外跑業務，然後10%的web開發設計人員把淩亂不堪的HTML程式碼片段一遍一遍的往table裡面塞。

甚至可以這麼說，一個公司對div+css的認同和投入，直接決定了這個公司的期望目標，比如上市。好在我現在所在的公司在這一點上是非常願意付出代價的。

 

其實，在具體商業產品實現上，並非一定要把自己拘泥於“Web標準絕對擁躉”的角色。我們似乎應該靜心思考為什麼使用div+css，而不是如何?某個細節。

 

我們公司面臨的困境則是相反的。就是太拘泥於div+css、為了DIV+CSS而DIV+CSS。這樣做是毫無意義的。如果為了實現一個效果而不顧策略強行使用一種技術，是非常失敗的一種做法。當然，我覺得這需要設計人員與開發人員的共同努力和讓步。尤其是在B/S架構下。設計者肯定要做出更多的讓步。比如某個布局中1px的差距能節省3k的HTML檔案size，哪怕放棄視覺上這1px的效果，我看都值得。更何況，大多數幹擾DIV+CSS布局的設計本身也是極不美觀的。

 

movivi.com的SEO我思考了很多。我覺得最大的問題就出在我們並沒有足夠吃透W3C上。

當時，當w3c剛出的時候，三大門戶十分不屑。清一色的table遍布整個首頁。可是這樣導致的問題不久就暴露出來了。搜尋引擎爬蟲難以解析複雜的table，而樣式的改版也極為難受。

div+css，這個布局中，div承載的是內容，而css承載的是樣式。內容和樣式的分離對於所見即所得 (WYSIWYG)的傳統table編輯方式確實是一個很大的衝擊，尤其是設計人員很難接受設計一個他們不能立即看到的樣式。不過div+css的好處實在是太明顯了：

 

1、搜尋引擎親和力：搜尋引擎不會在意一個頁面的設計或者構成。搜尋引擎不可能“欣賞”設計漂亮新穎的頁面；也不會去“排斥”顏色搭配醜陋的頁面。它們只是默默地拿到它們需要的內容就離開。如果一個頁面中涵蓋了大量的table來描述構架，試想搜尋引擎要花多大的代價才可以拿到真正有用的資訊呢？
憑我自己的經驗，一般來說，table構架描述的頁面，樣式結構和內容資訊大小比可能達到1：1甚至更高。而CSS+DIV構架的頁面，雖然在用戶端看來下載一個複雜的CSS也要佔用差不多的頻寬，然而搜尋引擎可以很方便的繞過這個css，而直接抓去div中的內容。這便是div的優勢所在。頻寬的稍多佔用，完全顯得微不足道，更何況一個冗餘的table設計架構如果代碼寫的不好會佔用更多的頻寬。

 

2、重構頁面的方便性。
這個應用最經典的例子就是各大blog程式了。就如現在我用的LBS系統，以及流行的PJBLOG、php下面的WP、MT，都是採用div+css構架。內容和樣式的分離導致我們在重構頁面配置（更換皮膚）的時候，只用針對每一個div元素重新定義其具體位置、樣式就行了。而在原來的table基礎上進行改版,幾乎必須改變所有的內容注入渠道,實在是太過於麻煩.

關於韓國風格網站難用div描述的問題，我個人認為在web2.0的大軍衝擊下，韓國的花哨流派很快會被簡約派所代替。如果確實是優秀的設計，我個人認為用Flash來完成更好！

 

http://awards.cssmania.com/2006/07/07/css-world-awards-winners-2006.php
2006年CSS世界大賽得獎作品，看看什麼叫做W3C下的完美藝術吧！看看人家的PR吧！