“重構”的東風吹遍大江南北，互聯(lián)網(wǎng)臨時間土崩瓦解，“div+CSS”儼然已成為一種“時尚”，難以盡數(shù)的網(wǎng)站都不謀而合地開始了本身的“重構”。然而打開這形形色色網(wǎng)站的源代碼，卻時常令人啞然發(fā)笑——

我們看到有嵌套6、7層的div布局，有不消table的表格，有純div+a構成的頁面，有成百上千的體現(xiàn)層class……如今關于尺度的冊本越來越多，除了少數(shù)幾本標榜“高級本領”的冊本以外，很少有人不會在本身著作的前幾章夸大如許一句話——“布局與體現(xiàn)分散”。然而這些冊本的讀者們，又有幾多人認認真真地讀過前幾章呢？照舊更多地直接跳過那些乏味的布局解說，一頭扎到貌似高妙的布局本領與Hack中去？

實在div+CSS這個說法從一開始就誤導了太多的人，急功近利的心態(tài)則更是造成這種征象的罪魁罪魁。一個風俗了table布局的網(wǎng)頁制作打仗尺度的第一步，不該該是去盲目尋求實現(xiàn)種種布局的CSS本領，而是高興轉變本身的頭腦方法。

下面將聯(lián)合我的親身領談判一談適應尺度的頭腦方法，此中有不少是我曾經(jīng)走過的彎路，盼望對方才打仗尺度的XDJM們有些資助：

1、“節(jié)流代碼”是營銷本領，不是宗旨

“利用div布局可以比table布局節(jié)流更多的代碼”，我在很多冊本和網(wǎng)站上見到過這句話。這句話本身是沒錯的，可以“節(jié)流代碼”簡直是網(wǎng)頁尺度化所帶來的利益之一。然而牢記，它只是“利益之一”，而不是“唯一利益”，更不是宗旨。“節(jié)流代碼”更多的時間是我們用來說服那些至死不悟的老板的營銷本領。網(wǎng)頁尺度化的唯一宗旨是“布局與體現(xiàn)分散”，而絕不是為了節(jié)流代碼而節(jié)流代碼。我曾經(jīng)過于網(wǎng)站邊欄乃至主體內(nèi)容的體現(xiàn)情勢雷同而接納了同一的class （至今另有一些書是如許教的），如許簡直比分別定名id更節(jié)流代碼，然而如許做的價錢是代碼失去了精良的布局。失去精良布局的結果是：一、源代碼沒有了可讀性；二、網(wǎng)站增加了未知的維護本錢。試想，當某一塊內(nèi)容由于必要而作出體現(xiàn)情勢的變更，比方鏈接的顏色等等，我們就不得不去修改頁面源文件，增加分外的class，事情量比起只必要調(diào)解id分組就大了很多。并且長此以往，布局將會越來越差，形成難以逆轉的惡性循環(huán)。

另有一種環(huán)境，出如今id的定名方面，也是本人曾經(jīng)犯過的錯誤。當時為了“節(jié)流代碼”，而把主菜單定名為“mm”，二級菜單定名為“m2”，三級菜單為“m3”，結果嚴峻低落了網(wǎng)頁的可讀性，使其他同事很難接辦，圖省事卻累了本身。同理，文件及文件夾定名方面也不宜過簡，象《網(wǎng)站重構》里發(fā)起把圖片都用“i”目次存放，小我私家以為并不行取，除非你能為這種高度縮寫的目次布局撰寫細致闡明并包管每個相干職員包羅其他制作職員、開辟、乃至懂行的老板……都能明白和實行，不然只會給你本身增加不必要的貧苦。

2、ID是偷襲槍，class是雙刃劍

想要做好網(wǎng)頁布局，id與class都是必須純熟掌握的，所謂“兩手抓，兩手都要硬”。ID就象偷襲槍一樣，可以資助我們精準地定位要想要加載樣式的元素；而class則是俠客的佩劍，信手拈來越發(fā)輕巧靈巧，兩者的聯(lián)合可以大概實現(xiàn)布局精良且體現(xiàn)富厚的頁面。然而如今有一種錯誤的看法，便是id完全可以用class來代替，究竟上很多網(wǎng)頁源代碼也簡直云云，打開來通篇class，找不到一個id。造成這種征象的來由有很多種，然而自table期間傳下來的根深蒂固的“class=CSS”的看法才是本因。簡直，class比id用途更廣更機動，但也必須意識到，class對付構建精良的網(wǎng)頁布局遠不如id有用。id的逼迫唯一性使得我們可以很容易通過id檢索到我們必要的恣意模塊，而class則沒有這個上風。固然我們可以為模塊界說唯一的class名，但條件是——只有制作者本人可以動網(wǎng)頁樣式。不然換一個輕微懶一些店員，看到樣式雷同便直接把前面的class拿來套用，其結果便是我們發(fā)明網(wǎng)頁里有十幾個模塊都叫做“gonggao”大概“xinwen”，以至于為了區(qū)分還不得不加上大量的html解釋，如許的結果顯然并不是我們想要的。再者便是前面提到的，通過通用class所節(jié)流下來的代碼，又不得不在每個單獨界說的class中浪費失。

ID是偷襲槍，class是雙刃劍，合則兩利，分則兩敗。

3、并不是全部的內(nèi)容都必要div做“容器”

　　主菜單究竟是用