基類 和 擴展類 是這個系列的主要內容，上一篇《 模塊化的核心思想──頁面重構中的模塊化設計（四） 》中只是簡單提了一下，我們再深入的來了解下它們。
一般所使用的“模塊化”的方法，就是以某一個類做爲定義的開始，比如：
/* S 圖片列表 */
.pic_lists li,
.pic_lists li img{float:left;width:122px;height:122px;margin-bottom:8px;}
.pic_lists li{list-style:none;margin:0 0 0 6px;text-align:center;}
.pic_lists li .pic{display:block;border:1px solid #476081;}
/* E 圖片列表 */
/* S mtv列表 */
.mtv_lists{width:930px;height:130px;}
.mtv_lists li,
.mtv_lists li img{float:left;width:120px;margin-bottom:8px;}
.mtv_lists li{list-style:none;margin:0 10px 0 0;text-align:center;}
.mtv_lists li img{height:90px;border:1px solid #476081;}
.mtv_lists li .pic{display:block;width:120px;height:90px;margin-bottom:8px;}
/* E mtv列表 */這個例子： 兩個列表模塊 。這種方式是比較常見的，可以很好的將一個模塊獨立出來。如果使用新學習到的“方法”來寫這兩個列表模塊，應該是怎樣？
- 基類
- （基礎樣式）模塊的基礎表現。包含了模塊中大部分的狀態。
也就是說，當出現多個類似的模塊時，基類包含了這些模塊的大部分的效果（或者理解爲公共的部分），在基類的基礎上，我們可以通過添加很少的代碼——擴展類，來達到所需要要效果。像這樣：
/* S 列表 基類 */
.mode_lists li,
.mode_lists li img{float:left;width:122px;margin-bottom:8px;}
.mode_lists li{list-style:none;margin:0 10px 18px 0;text-align:center;}
.mode_lists li img{border:1px solid #476081;}
/* E 列表 基類 */
/* S 圖片列表 */
.pic_lists li,
.pic_lists li img{height:122px;}
.pic_lists li{margin:0 0 8px 6px;}
.pic_lists li .pic{display:block;border:1px solid #476081;}
/* E 圖片列表 */
/* S mtv列表 */
.mtv_lists{width:930px;height:130px;}
.mtv_lists li,
.mtv_lists li img{width:120px;height:90px;}
.mtv_lists li .pic{display:block;margin-bottom:8px;}
/* E mtv列表 */可能你會覺得這樣的樣式不就多寫了，還得把原先的模塊類變成兩個。的確不是所有的模塊都值得這樣去做，於是我們可以得到一種“偷懶”的作法，把其中一個模塊直接變成基類。對於經常會被使用的模塊，像圖片列表、播放列表等，這種寫法在代碼的複用和效率會有一定的提高。一般情況下只需要做下簡單的修改即可應用，來看一個複雜些的例子：
一個帶頭像的消息列表（A）
不帶頭像的簡化列表（B）
看看這兩個圖，在腦中先想想如果是你，你要怎麼實現。……5分鐘過去了……差不多有方案了，按上面的思路，基類是包含了大部分的效果的，也就是說基類應該能滿足大部分效果的需要，兩個模塊間差異的地方，可以通過擴展類來完成。當然前提是這兩個模塊有能找到類似的點，能夠形成基類。
在這兩個模塊中，我們不難看出，A模塊和B模塊在信息的部分是很類似的，雖然B模塊的列表不需要A模塊的評論部分，但這並不影響B模塊的表現。所以我們可以把這兩個模塊看成的類似模塊。另個，以哪個爲基類呢？從滿足大部分效果這個要求來看，很明顯A模塊做爲基類是要比B模塊做爲基類更合適的，如果用B模塊做基類，那麼需要寫更多的擴展類來滿足A的需要。另外還有一個重要的點，之所以選擇A模塊爲基類，是因爲A在欄目中被更多的頁面使用。
OK，來看看A模塊怎麼實現（樣式部分）：
/* S 消息 基類 */
.mode_message{position:relative;padding:8px 3px 8px 48px;
border-bottom:1px solid #DAECF6;_zoom:1;line-height:1.3;}
.mode_message .user_info{position:absolute;left:3px;top:10px;}
.mode_message .user_info .pic img{width:35px;height:35px;}
.mode_message .mode_message_cont{color:#797979;
word-break:normal;word-wrap:break-word;}
.mode_message .mode_message_cont .info{display:block;zoom:1;}
.mode_message .mode_message_cont .info .music_name{color:#22639B;}
.mode_message .mode_message_cont .info .op_music{display:none;}
.mode_message .mode_message_cont .info:hover .op_music,
.mode_message .mode_message_cont .info.hover .op_music{display:block;position:absolute;right:5px;top:7px;
background-color:#FFFFFF;}
.mode_message .msg{padding:2px 0;word-break:normal;word-wrap:break-word;}
.mode_message .mode_message_cont .op{margin-bottom:3px;}
.mode_message .time{display:inline-block;*display:inline;*zoom:1;font-size:10px;}
.mode_message .msg .p_zt_l,.mode_message .msg .p_zt_r{display:inline-block;*display:inline;*zoom:1;
width:13px;height:8px;background:url(img/_g_other.png) no-repeat -17px -17px;
vertical-align:text-middle;*vertical-align:middle;}
.mode_message .msg .p_zt_r{background-position:0 -28px;}
.mode_message .write_back .cont{margin-bottom:2px;padding:5px;background-color:#EAF6FA;_zoom:1;}
.mode_message .write_back .cont .cont{border-left:1px solid #ABCFE1;}
.mode_message .write_back .cont .zt{*overflow:hidden;}
.mode_message .write_back .cont .zt2{*padding-right:6px;}
.mode_message .write_back .cont .zt textarea{width:100%;height:40px;padding:0 2px;
border:1px solid #D1E1EC;line-height:20px;color:#4F4F4F;}
.mode_message .write_back .cont .zt .normal textarea{height:23px;color:#B1B4B8;}
.mode_message .write_back .cont .zt .normal .op{display:none;}
.mode_message .write_back .cont .op{margin:5px 0 0;}
.mode_message .write_back .cont .op .bt_v2{padding:0 2px;vertical-align:middle;}
.mode_message .write_back .cont .zt{width:98.5%;*width:99.9%}
.mode_message:nth-last-child(1){border-bottom:none;}
/* E 消息 基類 */別忘了提示條，雖然是用於模塊中，但它應該是可以被更廣泛使用的模塊，因此我把它單獨提了出來：
/* S 提示條 基類 */
.mode_hint{position:relative;margin:3px 0;padding:5px;
background-color:#FFFEAB;color:#000000;_zoom:1;}
.mode_hint .op{position:absolute;right:8px;top:5px;}
.mode_hint .op a{color:#000000;}
/* E 提示條 基類 */還有像按鈕、全局定義這些內容，就不列出了。完整的可以看： 基類、擴展類實例 。例子中可以看到，擴展類的定義很少，只是一些簡單的定義，像B模塊：
/* S 消息 擴展 */
.message_nopic{padding-left:0;}
/* E 消息 擴展 */只需要一句，將頭像去掉即可。
