DIV+CSS忽悠前端小白

在大約兩年前，DIV+CSS是一對很誘人的組合，會用DIV+CSS製做網頁的人，經常會被人贊以大拇指的，記得06年初的時候，我用 div+css佈局的一個純靜態網站還拿了學校網頁設計比賽的一個獎。

今天，儘管提到DIV+CSS，還會有不少人熱情高漲，可是我會對他 搖頭了：DIV+CSS不是一切，更不是某些人所謂的「神話」！創造神話的是CSS，不是DIV+CSS。我想，是時候糾正這個問題了。

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

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

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

顯 然HTML並不僅是一個DIV標籤有用，每一個標籤都有它的用途，只是DIV是其中最有用的一個罷了。若是DIV能夠實現全部其它標籤的功能，那麼W3C早 就把HTML精簡了！

Table也不是一無可取，只是用table比較簡單、容易上手纔在早期被人錯誤的普遍推廣。可是table在處理網 頁數據的表現上，是其餘標籤沒法替代的，只是，它不適合用來作整個頁面的佈局。

二、代碼的可讀性

純DIV+CSS的網站 的代碼的可讀性無疑是很是差的，甚至table還能夠經過tr和td來區分行和列，一堆DIV堆砌在一塊兒，若是沒有註釋，你根本不知道某個部分是作什麼用 的。

三、語義化與結構化

如今，在開發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>就比上面的那個結構要清晰不少。

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

四、團隊合做

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

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

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

請不要再特地提DIV了。小白們真的會把它看成寶貝的！

其實回頭看看國內普及標準化的過程，已然走錯路了，就在國外同 行研究CSS Sprites和網格（Grid）等技術時，咱們在作什麼？就在國外CSS框架遍地開花的時候，咱們在作什麼？到如今咱們仍是隻能去國外的東西，依然跟在 別人後面。

兩年了，咱們依然糾纏於DIV+CSS……