今天看到神采飛揚(yáng)發(fā)表于前端觀察的《DIV+CSS 請不要再忽悠人了》，講的挺有深意的，尤其對于新手如何正確認(rèn)識div，學(xué)習(xí)web標(biāo)準(zhǔn)，使用web標(biāo)準(zhǔn)建站應(yīng)該有很大幫助。轉(zhuǎn)載過來，共同分享。

在大約兩年前，DIV+CSS是一對很誘人的組合，會用DIV+CSS制作網(wǎng)頁的人，常常會被人贊以大拇指的，記得06年初的時(shí)候，我用div+css布局的一個純靜態(tài)網(wǎng)站還拿了學(xué)校網(wǎng)頁設(shè)計(jì)比賽的一個獎。

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

CSS的要義，是各個標(biāo)簽要各盡所用。

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

1、DIV只是HTML最常用的標(biāo)簽之一

顯然HTML并不只是一個DIV標(biāo)簽有用，每個標(biāo)簽都有它的用途，只是DIV是其中最有用的一個罷了。如果DIV可以實(shí)現(xiàn)所有其它標(biāo)簽的功能，那么W3C早就把HTML精簡了！

Table也不是一無是處，只是用table比較簡單、容易上手才在早期被人錯誤的廣泛推廣。但是table在處理網(wǎng)頁數(shù)據(jù)的表現(xiàn)上，是其他標(biāo)簽無法替代的，只是，它不適合用來做整個頁面的布局。

2、代碼的可讀性

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

3、語義化與結(jié)構(gòu)化

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

HTML同樣如此，比如我們看到<ol>就知道這是個有序列表；看到<p>標(biāo)簽就知道這是一個段落，內(nèi)容為文字；看到<span>就知道這個是比<p>還小的文字單位；看到<h1>、<h2>之類的就知道他們是標(biāo)題。

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

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

相信做開發(fā)的人對代碼的語義化和結(jié)構(gòu)化的理解會更加深刻。

4、團(tuán)隊(duì)合作

可讀性低、結(jié)構(gòu)化和語義化差，團(tuán)隊(duì)的其他成員的學(xué)習(xí)和維護(hù)難度就會提高，這對于一個團(tuán)隊(duì)來說，是很浪費(fèi)時(shí)間和精力的。

其實(shí)，DIV+CSS的說法，已經(jīng)把我們從table帶到了另外的一個極端，正確的網(wǎng)頁設(shè)計(jì)不是一個標(biāo)簽雄霸天下，而是每個元素都使用合適的標(biāo)簽。

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

請不要再特意提DIV了。小白們真的會把它當(dāng)作寶貝的！

其實(shí)回頭看看國內(nèi)普及標(biāo)準(zhǔn)化的過程，已然走錯路了，就在國外同行研究CSS Sprites和網(wǎng)格（Grid）等技術(shù)時(shí)，我們在做什么？就在國外CSS框架遍地開花的時(shí)候，我們在做什么？到現(xiàn)在我們還是只能去國外的東西，依然跟在別人后面。

兩年了，我們依然糾纏于DIV+CSS……