睡蓮‧池水間

Guest
2010-Sep-04  
0 位會員和 8 位訪客在線上

文章 :: 標準之路

DIV+CSS 請不要再忽悠人了

神采飛揚
 
http://www.qianduan.net/?p=2305 
在大約兩年前,DIV+CSS是一對很誘人的組合,會用DIV+CSS製作網頁的人,常常會被人讚以大拇指的,記得06年初的時候,我用div+css佈局的一個純靜態網站還拿了學校網頁設計比賽的一個獎。

今天,盡管提到DIV+CSS,還會有很多人熱情高漲,但是我會對他搖頭了:DIV+CSS不是一切,更不是某些人所謂的“神話”!創造神話的是CSS,不是DIV+CSS。我想,是時候糾正這個問題了。

CSS的要義,是各個標籤要各盡所用。

盲目推崇DIV+CSS只會讓小白誤入歧途的。

1、DIV只是HTML最常用的標籤之一

顯然HTML並不只是一個DIV標籤有用,每個標籤都有它的用途,只是DIV是其中最有用的一個罷了。如果DIV可以實現所有其它標籤的功能,那麼W3C早就把HTML精簡了!

Table也不是一無是處,只是用table比較簡單、容易上手才在早期被人錯誤的廣泛推廣。但是table在處理網頁數據的表現上,是其他標籤無法替代的,只是,它不適合用來做整個頁面的佈局。

2、代碼的可讀性

純DIV+CSS的網站的代碼的可讀性無疑是非常差的,甚至table還可以通過tr和td來區分行和列,一堆DIV堆砌在一起,如果沒有註釋,你根本不知道某個部分是做什麼用的。

3、語義化與結構化

現在,在開發CSS的時候,提的越來越多的是語義化,語義化歸根到底其實還是代碼的可讀性問題。語義化就是讓代碼更易讀,更加易懂,比如,.text_01{color:red} 就沒有.text_red{color:red} 容易理解。

HTML同樣如此,比如我們看到<ol>就知道這是個有序列表;看到<p>標籤就知道這是一個段落,內容為文字;看到<span>就知道這個是比<p>還小的文字單位;看到<h1>、<h2>之類的就知道他們是標題。

顯然,全部是div的頁面,是看不出來這些的。

頁面的結構化亦是如此,比如<div><div><div><div>…..</div>< /div></div></div>這樣的代碼,顯然是很難理解其DOM結構的,但是<div><p><h2><span>…..</span>< /h2></p></div>就比上面的那個結構要清晰很多。

相信做開發的人對代碼的語義化和結構化的理解會更加深刻。

4、團隊合作

可讀性低、結構化和語義化差,團隊的其他成員的學習和維護難度就會提高,這對於一個團隊來說,是很浪費時間和精力的。

其實,DIV+CSS的說法,已經把我們從table帶到了另外的一個極端,正確的網頁設計不是一個標籤雄霸天下,而是每個元素都使用合適的標簽。

所以說,DIV+CSS要換一種說法了,(X)HTML+CSS不更合適嗎?

請不要再特意提DIV了。小白們真的會把它當作寶貝的!

其實回頭看看國內普及標準化的過程,已然走錯路了,就在國外同行研究CSS Sprites和網格(Grid)等技術時,我們在做什麼?就在國外CSS框架遍地開花的時候,我們在做什麼?到現在我們還是只能去國外的東西,依然跟在別人後面。

兩年了,我們依然糾纏於DIV+CSS……

PS:我在半年前寫過一篇同名博文,但是當時也不過隨意嘮叨兩句,沒想到這幾天竟又見到很多歌頌DIV+CSS的文章,讓我覺得,有必要說些什麼……

    «« 實現乾淨代碼的12條定律 互聯網需要“統一標準” »»    

引用

  • 文章地址: http://waterlily-lsl.com/modules/article/view.article.php/c1/117
  • 引用地址: http://waterlily-lsl.com/modules/article/trackback.php/117

評分

10
9
8
7
6
5
4
3
2
1


 

API: RSS | RDF | ATOM

回覆及設定

    關閉


 DIV+CSS 請不要再忽悠人了
訪客

發表日期: 09/6/22 14:50  更新日期: 09/6/22 14:50


很有价值

回覆

 DIV+CSS 請不要再忽悠人了
tw9990

網友

註冊: 09年10月5日
來自: 台灣-台南
回覆數: 31

發表日期: 09/10/5 21:21  更新日期: 09/10/5 21:21


我英文完全不行

所以FrontPage上常見的標籤就比較常使用如table td tr

最常使用得就是br hr留言時很方便

留言時DIV的標籤一率刪除

回覆

 

最 新 發 表 及 資 訊 區

此為池水間 banner ,需要安裝 Adobe Flash Player 才能觀看內容。

最新留言

留言日期:2010-Jun-10 11:51am
留言編號:50
留言者: sandy
網主回覆: 暫無
現有留言數: 46

前往萍踪留影

軒榭亭臺最新連結
會在模組開放後放出

前往軒榭亭臺

造訪統計

今天:138
昨天:298
本週:1889
本月:1031
總計:196712
平均:257

連結

Powered By XOOPS
Valid XHTML 1.1
Valid CSS 3
登 入