這里著重講一下模塊化開(kāi)發(fā)為后期維護(hù)帶來(lái)的好處！
首先，不管了不了解，鬼哥的這篇文章都可以看一下，從宜家的家具設(shè)計(jì)講模塊化http://www.dbjr.com.cn/css/divcss-10075.html
并不是多高深的東西，在工作中，應(yīng)用div css操作，你應(yīng)該會(huì)逐步的去想，怎樣提高效率，怎樣兼容，怎樣精煉代碼，怎樣讓后期維護(hù)變的更加簡(jiǎn)單。你可能每過(guò)一段時(shí)間，都想把自己以前寫(xiě)的東西重構(gòu)一下。這是很好的想法，也是很好的表現(xiàn)，因?yàn)槟阋恢痹诓粩嗟倪M(jìn)步。模塊化的思想，必定會(huì)在你的逐漸進(jìn)步之中被你領(lǐng)悟！
這里著重講一下模塊化開(kāi)發(fā)為后期維護(hù)帶來(lái)的好處！
在工作中，我做了一個(gè)如下圖結(jié)構(gòu)的網(wǎng)站。

首先要說(shuō)一下繆同學(xué)，（備注，不是我公司里的徒弟），繆同學(xué)是一個(gè)很羅嗦很繁瑣的人。這兩個(gè)形容詞其實(shí)都不恰當(dāng)。這不，第二天，他讓我把B和C左右互換個(gè)位置，我說(shuō)沒(méi)問(wèn)題，打開(kāi)css，把side_list和side_content的left的值改了一下。他依舊很羅嗦。第四天，他讓我把B1和B3的位置換一下，我說(shuō)沒(méi)問(wèn)題，打開(kāi)css，把sub_list_1和sub_list_3的top的值改了一下。第六天，他讓我把B1放到C里的下邊并居中。好吧，我打開(kāi)html，把包含文件中的sub_list_1剪切到side_content的底部。
在做這些的過(guò)程中，我只是因?yàn)閮蓚€(gè)模塊內(nèi)有相同的hx而針對(duì)他們寫(xiě)了一個(gè)!important。
當(dāng)然，這僅僅是模塊化設(shè)計(jì)的好處之一。
需要注意的地方：
·上下級(jí)模塊內(nèi)相同標(biāo)簽的優(yōu)先級(jí)問(wèn)題。
·全局樣式的和模塊樣式的優(yōu)先級(jí)。
·良好的擴(kuò)展性。
·盡量做到具有相同標(biāo)簽的模塊是平行關(guān)系。
·優(yōu)化你的全局樣式，讓模塊代碼更簡(jiǎn)潔。
在我這里，設(shè)計(jì)到切圖布局都是一個(gè)人，所以，不存在命名沖突問(wèn)題。多人協(xié)作的時(shí)候，模塊化設(shè)計(jì)同樣可以避免這一問(wèn)題。有效的避免命名、樣式?jīng)_突等問(wèn)題。
上邊說(shuō)的注意的第三條，良好的擴(kuò)展性。很多時(shí)候，比如，layout內(nèi)有A/B/C三個(gè)元素，layout內(nèi)有10px的邊，那么，這10px的邊，究竟是在layout上用padding表達(dá)還是在子元素上用margin表達(dá)？當(dāng)然，不同情況不同對(duì)待！

最新評(píng)論