轉載地址：http://blog.ohweb.cn/archives/239
淺談html的模塊化布局
在網站的初始開發階段，當你拿到最初的psd設計稿時，你是如何下手開始的呢？
你是依據什么划分網頁的結構的？
你將依據什么如何提取網頁內部的公用樣式呢？
模塊化的布局，最大的好處，便是易於開發和維護。更好的響應需求的變更。模塊之間不相互依賴，又有一定的共性。
模塊化的布局通常應用在大型的互聯網網站開發中。
它的網站架構更需要的是在合理的嵌套中保持最好的健壯性，可拓展，易維護性。
例如：
你是否曾經經歷過改版時部分功能的刪除與修改，而此時你將要費心費力的去尋找此部分功能的htm和css代碼，而css又有可能分布在不同的css文件中。你從不敢輕易刪除一段樣式的代碼，因為你怕別的功能也應用了此段代碼。
如果，你接受的是另一個人開發的項目，那么恭喜你，你每刪除一段代碼都將戰戰兢兢。。如果你不刪除此段代碼，長此以往將留下一大段的“歷史遺留問題”。
例如：
你是否曾經經歷在開發過程中，一個class的類名被命名的又臭又長，因為如果不這樣的話，你將有可能跟其他的部分的class產生沖突，或者樣式被覆蓋。
你是否曾經看到過一段樣式的代碼。如.title 。。你有點記不起它在什么地方應用過，卻又不得不留着它，並且在你以后的開發過程中，繞開.title的命名。
………
而對於我們這些有代碼潔癖的的程序猿們，都希望看到整齊，有序的代碼。並且希望我們的代碼，每一行都不需要冥思苦想而能夠輕松的知道它的作用和應用場景。
一個完整的網頁，應該是由多個模塊組成的。
例如頭部的topbar，底部的copyright，內容的新聞列表，圖片列表，側部的熱播排行等，他們都是一個模塊，他們獨立的展示了一塊自己的功能。
如下圖：
在模塊化的布局中，有模塊文件和模板文件。
在開發的過程中，將把這些模塊提取出來。為其單獨建立一個文件，為模塊文件，而引入了這些模塊的頁面，為模板文件。。
請看下圖示例：
模板文件：（~~~~(>_<)~~~~ 原諒博主不會畫結構圖，只能直接上代碼了）
模塊文件：
這些模塊將有一個唯一的id屬性是模塊名，一般為文件名。
在網頁開發過程中，非常不推薦id使用在除文檔架構層以及除標識模塊名之外的地方。因為除模塊名之外，基本沒有永遠唯一的，不變的功能。
這些模塊將有一個公用的class標識”g-mod”來標識他是一個獨立的模塊。
g-mod可以沒有任何樣式，它的存在僅僅是在網頁結構中標識一個模塊。
那么一個模塊內部的結構又是什么樣的呢？
首先，模塊必定要有頭部，我們為頭部起一個名字叫.hd 。
頭部中必定包含一個title。有人會問，如果沒有title該怎么辦，沒有title只是在頁面的展示中沒有一個明顯的標題，但是模塊本身是要有標題的。
我們可以將此標題寫在頁面中，並且用css將其隱藏，這樣做的好處是在某些輔助閱讀工具在抓取我們的網頁時，文檔的大綱會清晰明了。也會使我們的網頁更加語義化。
其次，便是模塊的主體部分 ，我們為其起一個名字叫 .bd。
我們會將模塊的大部分內容寫在此處。
然后，是模塊的尾部，我們可以把模塊的一些次要內容，花邊類的東西放在這個地方。 我們給它起名字叫 .ft。
如果沒有這部分，我們可以不要模塊的尾部。
那么，一個模塊的結構圖如下：（~~~~(>_<)~~~~ 原諒博主不會畫結構圖，只能直接上代碼了）
這個時候，可能會有同學覺得，如果所有的模塊都這樣命名，是否會有樣式沖突？
答案是不會。
我們在寫css的樣式的時候，每個模塊的樣式，都會在樣式前聲明自己的“命名空間”。所以不同模塊內部的相同命名的元素樣式不會相互覆蓋與干擾。
例：
說到命名，又想絮叨幾句，
模塊的ID名，通常要完整，最起碼通過模塊的ID命，可以定位到是哪個模塊。是做什么的。
而樣式的class名，最好是要多簡潔有多簡潔，不要帶上位置，模塊的信息，避免一切的冗余。在命名的過程中不必擔心與其他模塊的命名相沖突，又有那么一點點語義化。
這樣我們可以通過閱讀一行css，而快速的在腦海中知道，這一行的css是對應哪里的樣式。
如#apprise .list{}，我們通過讀這一行樣式，就會知道，此頁面中有一個“評價”功能的模塊，有一個列表。而#apprise li .date{},我們就會知道這行css是為了“評價”模塊的列表中的時間信息所寫。
在上面的圖中，我們會看到，在模塊化的布局中，css的寫法也會實現類似“封裝”的視覺效果。在我們需要更改某個地方的時候，也會更加快速的定位到這個地方的樣式。
換一種說法就是我們不希望直接出現
.bd{} ;
.title{};
.name{};
這樣的樣式。因為這樣的寫法讓我們茫然，讓我們不知道他被哪些地方用到過。而且占用了.title,.bd這樣的命名，會讓我們下次不敢隨意在頁面制作的過程中使用這幾個類名。
而我們希望的是
#crumb .bd{}
#curmb .title{}
#newslist .name{}
這樣的方式，讓我們一看就知道他大概會出現在什么位置。
有人會說，這樣會平白無辜的在每一行樣式前面多了一層深度。影響性能的。
但是，我們現在的電腦，已經不是N年前的486，我們現在的瀏覽器，已經不是N年前的IE5。多這樣的一層嵌套。根本不會影響多少性能，卻使我們的代碼具有更好的健壯性和閱讀性，在大型的互聯網站開發中，版本不停的升級迭代。代碼的可維護性需求遠遠高於性能。
那么，如果真的有公用的部分該怎么辦呢？
如果是模塊和模塊之間有很大的相似度，我們可以直接寫一個公用的模塊。如：
/* g-newlist for module news1 , news2 */
.g-newlist{};
.g-newlist .hd{};
.g-newlist .bd{};
.g-newlist .ft{};
在模塊文件中我們可以如此使用。
<div id=”news1″ class=”g-newlist”>…….</div>
<div id=”news2″ class=”g-newlist”>…….</div>
其中g-newlist 中的“g-”為global的縮寫。當我們看到”g-”的時候，我們馬上會知道，它是一個全局的樣式。基礎的類。
注釋不可丟，一個公用的模塊樣式，要注釋他為哪幾個模塊服務。
如果這兩個模塊有相似，又有所不同，都帶了一點點個性化的東西，該怎么辦呢？
大家知道，id的優先級是比class高出一個山坡的。
公用部分：
.g-newlist{};
.g-newlist .hd{};
.g-newlist .bd{};
.g-newlist .ft{};
個性化部分：
#news1 .ft{}
#news1 .ft .link{}
#news2 .bd{}
是不是完美解決了呢？
如果不是模塊和模塊之間有很大相似度，而只是一個小小的地方，如icon，在到處被用到。我們該怎么辦呢？
我們可以寫
.g-ico{}
.g-ico-sina{}
.g-ico-pptv{}
等等。。。。
具體公用樣式的粒度大小，可以在開發的過程中自己掌控，不過，最好是在並非整個模塊都十分相似的條件下，粒度越小，越少的依賴父級結構越好。
使用模塊化的開發方式，使得一個團隊內部每個人的代碼都幾乎是一樣的，這樣改起別人的代碼來就像改自己的代碼一樣，改起自己的代碼來更加的快速和得心應手。
讓每個人都能讀懂我們的代碼。無論經過多少版本的迭代，我們只需要增，刪，改對應的模塊文件與其對應的樣式，不會遺留一坨坨不知所雲的代碼。
———–END
番外：
模塊化布局現在在大型互聯網站的開發中非常流行。有的網站從始至終使用模塊化的布局，而有的網站或多或少的應用。它最初起源於雅虎，而博主是在360時學習觀摩而來。此篇博客為自己對模塊化布局的理解和總結。也為紀念我們曾在一起工作的日子。
附上幾個例子供參考，如
http://v.duba.com/
http://v.360.cn/
http://hao.360.cn/
http://css.doyoe.com/